HTML5 Canvas Drawing Effects

Description

This tutorial shows you how to use canvas to create over a dozen different types of drawing effects. The snippet gives you an option to choose what type of brush you'd like to draw with (choose from one of sixteen different and colorful options!), and it also allows you to clear the canvas as well. It almost mimics the paintbrush or airbrush effects on popular image editing software like Photoshop. Adapted from a CodePen tutorial.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Bouncing Balls</title>
<style type="text/css">
body {
    display: flex;
    
    &::before {
        content: 'Just draw';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font: bold 50px/1 Arial, sans-serif;
        text-transform: uppercase;
        color: #DDD;
    }
}
canvas {
    position: relative;
    width: 100%;
    height: auto;
}

#blendModes {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    font-size: 16px;
}

#clear {
    position: absolute;
    z-index: 2;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
}
</style>

<select name="blendModes" id="blendModes">
  <option value="normal">normal</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="color">color-dodge</option>
  <option value="color">color-burn</option>
  <option value="hard">hard-light</option>
  <option value="soft">soft-light</option>
  <option value="difference" selected>difference</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>

<button id="clear">Clear</button>

Canvas Cheat Sheet

HTML5 Canvas Drawing Effects

Description

Demo