JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<canvas id="canvas1" width="200" height="200"></canvas>
<input type="number" value="2" id="strokesize" onchange="canvas.strokesize = parseInt(this.value);" />
<button></button>

CSS

body{
  background-color:#000;
  margin:0px;
}
canvas{
  outline:dashed 1px #ff0000;
}

JavaScript

var canvas = {

  strokesize: 5,
  
  fill: true,

	element: null,
  context: null,
  
  draw: function(x,y){
    
    
    
    if(this.fill){
    
    	this.context.fillStyle="red";
    	this.context.fillRect(x-parseInt(this.strokesize/2),y-parseInt(this.strokesize/2),this.strokesize,this.strokesize);
    
    } else {
    	
      this.context.strokeStyle="red";
    	this.context.rect(x-parseInt(this.strokesize/2),y-parseInt(this.strokesize/2),this.strokesize,this.strokesize);
    
    }
    
  	
		this.context.stroke();
  
  },
  
  onStart: function(){
  
  	var cached_this = this;
  	
    cached_this.element = document.getElementById("canvas1");
		cached_this.context = cached_this.element.getContext("2d");
    
    cached_this.element.addEventListener("click", function(e){ cached_this.draw(e.clientX,e.clientY); });
  
  }

}

canvas.onStart();