canvas.jade

extends base

block vars
  - var title = 'HTML5 Canvas'

block styles
  link(rel="stylesheet" type="text/css" href="styles/canvas.css")

block body

  canvas#draw(width="800" height="800")

  .controls
    label(for="width") Stroke Width:
    input(type="range" name="width" min="0" max="200" value="100")

  script(type="text/javascript").
    const $canvas = document.querySelector('#draw')
    const ctx = $canvas.getContext('2d')
    const $input = document.querySelector('.controls input')

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

    ctx.strokeStyle = '#BADA55'
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.lineWidth = $input.value || 100
    ctx.globalCompositeOperation = 'multiply'

    let isDrawing = false
    let lastX = 0
    let lastY = 0
    let hue = 0
    let direction = true

    function draw(e) {
      if (!isDrawing) return

      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`
      ctx.beginPath()
      ctx.moveTo(lastX, lastY)
      ctx.lineTo(e.offsetX, e.offsetY)
      ctx.stroke()
      lastX = e.offsetX
      lastY = e.offsetY

      hue++
      if (hue >= 360) hue = 0
      if (ctx.lineWidth >= $input.value || ctx.lineWidth <= 1) direction = !direction
      if (direction) ctx.lineWidth++; else ctx.lineWidth--
    }

    $canvas.addEventListener('mousedown', (e) => {
      isDrawing = true
      lastX = e.offsetX
      lastY = e.offsetY
    })
    $canvas.addEventListener('mousemove', draw)
    $canvas.addEventListener('mouseup', () => isDrawing = false)
    $canvas.addEventListener('mouseout', () => isDrawing = false)