JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<a href="http://jsfiddle.net/anshudwibhashi/mCP5N/3/">View Code</a> - <a href="http://www.stronia.com/2014/07/building-drawing-app-with-html5s-canvas.html">Back to stronia article</a>
<canvas id="canvas">Your browser is unsupported!</canvas>

JavaScript

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

var radius  = 10;

var pt = function(e){
    context.beginPath();
    context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
    context.fill();
}

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

document.body.style.margin = 0;

canvas.addEventListener("click", pt);