JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="canvas"></canvas>
<button id="clicker">Make the canvas Bigger!</button>

CSS

#canvas{
 width: 300px;
 height: 150px;
border:1px solid #000;    
}

JavaScript

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

canvas.width = 600;
canvas.height = 300;

ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(10,10,90,90);
ctx.fillRect(100,100,90,90);
ctx.fillRect(200,200,300,100);


var clicker = document.getElementById("clicker");
clicker.onclick = function(){
    canvas.style.width = '600px';
    canvas.style.height = '300px';    
}