JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<canvas id="canvas1" width="300" height="300" style="border: 1px solid black;"></canvas>

JavaScript

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

// This is where we'll try out different transformation functions
ctx.translate(100, 100)
ctx.scale(2,2);




var width = canvas.width;
var height = canvas.height;
for (var i = 0; i < width; i += 10) {
    ctx.moveTo(i + 0.5, 0);
    ctx.lineTo(i + 0.5, height)
}

for (var i = 0; i < height; i += 10) {
    ctx.moveTo(0, i + 0.5);
    ctx.lineTo(width, i + 0.5)
}
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2);'
ctx.stroke();

ctx.beginPath();
ctx.moveTo(-width * 2, 0);
ctx.lineTo(width * 2, 0);
ctx.moveTo(0, -height * 2);
ctx.lineTo(0, height * 2);
ctx.lineWidth = 8;
ctx.strokeStyle = 'red';
ctx.stroke();