Simple Javascript Painter Demo

index.html

<div class="tools">
  <label>
      Bruch Color
      <input id="color" type="color" value="#f00" />
  </label>

  <label>
      Bruch Size
      <input id="size" type="number" value="10" />
  </label>
  <button onclick="clearCanvas()">Clear</button>
</div>
<canvas id="canvas"></canvas>
<footer>Use this demo on touch screens </footer>

script.js

let c = document.getElementById("canvas");
let ctx = c.getContext("2d");

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
c.addEventListener("touchmove", onTouchMove);

function onTouchMove(e) {
  const touches = e.touches;
  console.log(touches);
  const size = Number(document.getElementById("size").value);
  const color = document.getElementById("color").value;

  for (var i = 0; i < touches.length; i++) {
    ctx.fillStyle = color;
    ctx.fillRect(
      e.targetTouches[i].pageX - size * 2,
      e.targetTouches[i].pageY - size * 2,
      size,
      size
    );
  }
}

function clearCanvas() {
  ctx.clearRect(0, 0, c.width, c.height);
}

simple-javascript-painter-demo.markdown

Simple Javascript Painter Demo

A simple javascript painter demo using canvas and touch events

A Pen by Hyyan Abo Fakher on CodePen.

License.

style.css

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
  height: 100%;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
}

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #3f51b5;
  color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

button,
input {
  outline: thin solid #5066dc;
  padding: 2%;
  background: transparent;
  border: none;
  color: white;
}


footer {
  position : fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-top : thin solid #f1f1f1;
  padding: 10px;
  color: #ccc;
}