JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<canvas id="canvas-1" height="500" width="640"></canvas>
<canvas id="canvas-2" height="300" width="384"></canvas>
<div id="ms">
here!!
</div>

CSS

#canvas-1 {
    border: 4px solid green;
}

#canvas-2 {
    border: 4px solid blue;
}

JavaScript

var primary = document.getElementById("canvas-1"),
    secondary = document.getElementById("canvas-2"),
    
    primaryCtx = primary.getContext("2d"),
    secondaryCtx = secondary.getContext("2d");

function renderCanvas(senderCanvas, recieverCtx, scale) {
const startMs = Date.now();
    recieverCtx.save(); //Save the context state
    recieverCtx.scale(scale, scale);
    recieverCtx.drawImage(senderCanvas, 0, 0); //Draw the canvas
    recieverCtx.restore();
    const elapsedMs = Date.now() - startMs;
    const eltMs = document.getElementById("ms");
    eltMs.textContent = elapsedMs + ' ms';
}

//Add some sample content to the primary canvas
var img = new Image;
img.onload = function() {
    primaryCtx.drawImage(this, 0, 0);
    
    primaryCtx.save();
    //A big red line too
    primaryCtx.beginPath();
    primaryCtx.moveTo((primary.width/2) - 100, primary.height/2);
    primaryCtx.lineTo((primary.width/2) + 100, primary.height/2);
    primaryCtx.lineWidth = 9;
    primaryCtx.strokeStyle = "#f00";
    primaryCtx.stroke();
    primaryCtx.restore();
    
    //Render the primary onto the secondary
    renderCanvas(primary, secondaryCtx, secondary.width/primary.width);
};

img.src = "http://i.imgur.com/ZDwkT.jpg";