Vector vs Raster Graphics

VectorRaster

Scale Factor:

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.

The HTML file:

<html>
<head>
    <script src="engine.js" defer></script>
</head>
<body>
<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>
        <b>Scale Factor:</b>
<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>

<table >
<tr><td rowspan=2>
<button type="button" id="left" onclick="Left(); Redraw()" >&larr;</button>
</td><td>
<button type="button" id="up" onclick="Up(); Redraw()" >&uarr;</button>
</td><td rowspan=2>
<button type="button" id="right" onclick="Right(); Redraw()" >&rarr;</button>
</td></tr>
<tr><td>
<button type="button" id="down"  onclick="Down(); Redraw()">&darr;</button>
</td>
</table>
<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.
</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;