JSFiddle - React, Tailwind, and code Playground

by phejny

HTML

<canvas id="scene" width="500" height="500">
</canvas>

<p>
  <input type="color" id="colorpicker" value="#000">
  <input type="range" id="widthpicker" min="1" max="50" value="10">
  <a id="download-png">Download as PNG</a>
  <a id="download-jpg">Download as JPG</a>
</p>

CSS

#scene {
  border: 1px solid #000000;
}

a {
  margin: 1px;
  padding: 4px;
  text-decoration: none;
  border: 1px solid #999;
  background-color: #ccc;
}

JavaScript

var colorpicker = document.getElementById("colorpicker");
var widthpicker = document.getElementById("widthpicker");


var canvas = document.getElementById("scene");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

var drawing = false;

canvas.addEventListener('mousedown', function(event) {
  drawing = true;
}, false);

canvas.addEventListener('mouseup', function(event) {
  drawing = false;
  last_offset = null;
}, false);


var last_offset = null;
canvas.addEventListener('mousemove', function(event) {

  if (drawing) {

    if (last_offset) {

      var a = last_offset;
      var b = {
        x: event.offsetX,
        y: event.offsetY
      };

      ctx.lineWidth = widthpicker.value;
      ctx.strokeStyle = colorpicker.value;
      ctx.lineCap = 'round';
      ctx.beginPath();
      ctx.moveTo(a.x, a.y);
      ctx.lineTo(b.x, b.y);
      ctx.stroke();

    } else {

      last_offset = {};

    }

    last_offset.x = event.offsetX;
    last_offset.y = event.offsetY;

  }

}, false);



document.getElementById('download-png').addEventListener('click', function() {

  this.href = canvas.toDataURL();
  this.download = 'image.png';

}, false);


document.getElementById('download-jpg').addEventListener('click', function() {

  this.href = canvas.toDataURL("image/jpeg");
  this.download = 'image.jpg';

}, false);