JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<canvas id="theCanvas" width="300" height="250"></canvas>

CSS

#theCanvas {
    border: 1px solid #ccc;
}

JavaScript

const canvasElement = document.querySelector('#theCanvas');
const canvasContext2d = canvasElement.getContext('2d');

const originX = canvasElement.width/2 - 50,
	  originY = canvasElement.height/2 + 50;
      



// translate the origin
//canvasContext2d.translate(originX, originY)
//canvasContext2d.transform(1, 0, 0, -1, 0, 0)
canvasContext2d.transform(1, 0, 0, -1, originX, originY)
//canvasContext2d.scale(1, -1)
//canvasContext2d.font= '16px Arial';
//canvasContext2d.fillStyle = '#666';

canvasContext2d.lineWidth = .3;
canvasContext2d.moveTo(0, -5) //canvasElement.height/2)
canvasContext2d.lineTo(0, 5) //canvasElement.height)
canvasContext2d.moveTo(-5, 0) //canvasElement.height/2)
canvasContext2d.lineTo(5, 0) //canvasElement.height)
canvasContext2d.stroke()
canvasContext2d.save();
/*




//canvasContext2d.moveTo(-canvasElement.width/2, 0)
//canvasContext2d.lineTo(canvasElement.width/2, 0)
canvasContext2d.stroke()

canvasContext2d.save();

/*
canvasContext2d.moveTo(0,0);
canvasContext2d.fillRect(0, 0, 100, 50)
drawPoint(0, 0);
drawPoint(0, 50);
drawPoint(100, 0);
drawPoint(100, 50);
canvasContext2d.save();
canvasContext2d.font= '12px Arial';
canvasContext2d.scale(1, -1)
canvasContext2d.fillText('(1, .5)', 100, -50);
canvasContext2d.restore();




canvasContext2d.stroke()




function drawPoint(x, y) {
  canvasContext2d.save();
  canvasContext2d.fillStyle = '#000';
  canvasContext2d.beginPath();
  canvasContext2d.arc(x, y, 2, 0, 2 * Math.PI, false);
  canvasContext2d.fill();
  canvasContext2d.restore();
}

/*

context.textBaseline = 'middle';

canvas.addEventListener('mouseout', function(e) {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

canvas.addEventListener('mousemove', function(e) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(e.layerX, e.layerY, 3, 0, 2 * Math.PI, false);
  context.closePath();
  context.fill();
  var text = '(' + e.layerX + ', ' + e.layerY + ')';
  context.fillText(text,...