JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<canvas id='c1' style='width:400px;height:400px'></canvas>
<hr/>

<canvas id='c2' width="400px" height="400px"></canvas>

JavaScript

function foo(c) {
    var ctx = c.getContext("2d");

    ctx.fillStyle = "silver";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 100);
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();
}

var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');

foo(c1);
foo(c2);