JSFiddle - React, Tailwind, and code Playground

canvas pix (fail)

by ikaruss

HTML

<canvas id="canvas" style="width:100px; height:100px" width="5" height="5"></canvas>

JavaScript

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

//Background
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener("mousedown", function(e) {
  var x = Math.floor(e.x * canvas.width / parseInt(canvas.style.width));
  var y = Math.floor(e.y * canvas.height / parseInt(canvas.style.height));

  //Zoomed in red 'square'
  context.fillStyle = "#F00";
  context.fillRect(x, y, 1, 1);
}, true);