JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<a href="http://jsfiddle.net/anshudwibhashi/6NZYa/1">View Source</a> - <a href="http://www.stronia.com/2014/07/building-drawing-app-with-html5s-canvas_24.html">Back to Stronia article &laquo;</a>
<canvas id="canvas">Your browser is unsupported!</canvas>

JavaScript

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

var radius  = 10;
var m_down  = false;

var pt = function(e){
    if(m_down){
        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;

var down = function(e){
    m_down = true;
    pt(e);
}

var up = function(e){
    m_down = false;
}

canvas.addEventListener("mousedown", down);
canvas.addEventListener("mousemove", pt);
canvas.addEventListener("mouseup", up);