Vector vs Raster Graphics

Vector vs Raster Graphics

VectorRaster

This code draws the image at scale=1 then captures a copy of that image. This is displayed in the "Raster" canvas.

The image is redrawn each time in the "Vector" canvas usnig the approprate scale.

wasd can be used in the windows to move.

Note, this is an old demo, I should rework it given a better knowledge of html/javascript

The HTML file:

<html lang="en">
<head>
    <script src="engine.js" defer></script>
</head>
<body>
<main>
<title> Vector vs Raster Graphics</title>
<h1> Vector vs Raster Graphics</h1>
<table>
<tr><th align=center>Vector</th><th align=center>Raster</th></tr>
<tr><td>
        <canvas id="vectorCanvas" width=300 height=300 style="border:2px solid"></canvas>
        </td><td>
        <canvas id="rasterCanvas" width=300 height=300 style="border:2px solid"></canvas>
        </td>
        </tr>
        </table>
        <p>

<label for="ScaleFactor">Scale Factor:</label>
<input
      type="text"
      maxLength = "3"
      size = "3"
      id="ScaleFactor">

<button type="button" id="redraw" onclick="Redraw()">Redraw</button>
<button type="button" id="redraw" onclick="Reset()">Reset</button>
<p>
<button type="button" id="left" onclick="Left(); Redraw()" >&larr;</button>
<button type="button" id="up" onclick="Up(); Redraw()" >&uarr;</button>
<button type="button" id="down"  onclick="Down(); Redraw()">&darr;</button>
<button type="button" id="right" onclick="Right(); Redraw()" >&rarr;</button>
<hr>
This code draws the image at scale=1 then captures a copy of that image.  This is displayed in the "Raster" canvas.
<p>
The image is redrawn each time in the "Vector" canvas usnig the approprate scale.
<p>
wasd can be used in the windows to move.
<p>
Note, this is an old demo, I should rework it given a better knowledge of html/javascript
</main>
</body>
</html>

engine.js

'use strict'

var RasterCanvas = document.getElementById('rasterCanvas');
var RasterCTX = RasterCanvas.getContext('2d');
var VectorCanvas = document.getElementById('vectorCanvas');
var VectorCTX = VectorCanvas.getContext('2d');
var RasterImage = new Image();

var TX = 0;
var TY = 0;

// set up a copule of callbacks to allow canvas movement.

function Keypress(evnt) {
   switch (evnt.key) {
      case 'w':
         Up()
         break;
      case 'a':
         Left();
         break;
      case 's':
         Down();
         break;
      case 'd':
         Right();
         break;
   }
}
RasterCanvas.tabIndex = 0;
RasterCanvas.addEventListener("keypress", Keypress);

VectorCanvas.tabIndex = 0;
VectorCanvas.addEventListener("keypress", Keypress);

function RedrawVector(scale=1) {
     // clear the screen
     VectorCTX.clearRect(0,0,VectorCanvas.width, VectorCanvas.height);

     // save the state
     VectorCTX.save()

     // change the scale
     VectorCTX.scale(scale,scale);
     VectorCTX.translate(TX, TY);

     // draw the image
     VectorCTX.beginPath();
     VectorCTX.moveTo(10,10);
     VectorCTX.lineTo(37,92);
     VectorCTX.lineTo(279, 294);
     VectorCTX.lineTo(10,10);
     VectorCTX.closePath();
     VectorCTX.stroke();

     // restore the state
     VectorCTX.restore();
     return;
}

function RedrawRaster(scale=1) {
     RasterCTX.clearRect(0,0,RasterCanvas.width, RasterCanvas.height);
     RasterCTX.save()
     RasterCTX.scale(scale,scale);
     RasterCTX.translate(TX, TY);
     RasterCTX.drawImage(RasterImage,0,0);
     RasterCTX.restore();
     return;
}

function Redraw() {
     let scale = parseFloat(document.getElementById("ScaleFactor").value);
     if (scale > 0 && scale < 100) {
        RedrawVector(scale);
        RedrawRaster(scale);
     }
     return;
}

function Left(){

     TX -=  1;
     Redraw();
     return;
}
function Right() {

     TX +=  1;
     Redraw();
     return;
}
function Up() {
     TY -= 1;
     Redraw();
     return;
}

function Down() {
     TY += 1;
     Redraw();
     return;
}

function Reset() {
    TX = 0;
    TY = 0;
    document.getElementById("ScaleFactor").value= 1;
    Redraw();
}

// set the value in the UI
document.getElementById("ScaleFactor").value= 1;

// draw the first image so we can capture the image
RedrawVector(1);

// now capture the image.
RasterImage.src = VectorCanvas.toDataURL("image/png");

// tell the browser to redraw the image after it has captured it.
RasterImage.onload= RedrawRaster;