JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="scaler">Scale by 1.5 times.</button><br>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

context.fillStyle="red";
context.fillRect(0,0,100,100);

$("#scaler").click(function(){
    
    var imageObject=new Image();
    imageObject.onload=function(){
        
        context.clearRect(0,0,canvas.width,canvas.height);
        context.scale(1.5,1.5);
        context.drawImage(imageObject,0,0);
        
    }
    imageObject.src=canvas.toDataURL();
    
});