Canvas Practice

canvas-practice.markdown

Canvas Practice

A Pen by Chase Harrison on CodePen.

License.

index.html

<canvas id="draw"></canvas>
<input id="range" type="range" min="1" max="100" value="10" />
<label for="range" class="rangeLabel"></label>
<section>
  <div class="cell">
    <a href="#" onclick="return false;" class="color blue" data-color="hsl(241, 100%, 50%)"></a>
  </div>
   <div class="cell">
    <a href="#" onclick="return false;" class="color red" data-color="hsl(0, 100%, 50%)"></a>
  </div>
   <div class="cell">
    <a href="#" onclick="return false;" class="color yellow" data-color="hsl(54, 100%, 50%)"></a>
  </div>
   <div class="cell">
    <a href="#" onclick="return false;" class="color green" data-color="hsl(128, 100%, 24%)"></a>
  </div>
  
  
  <div class="cell">
    <a href="#" onclick="return false;" class="color lightblue" data-color="hsl(179, 100%, 48%)"></a>
  </div>
  <div class="cell">
    <a href="#" onclick="return false;" class="color orange" data-color="hsl(35, 100%, 48%)"></a>
  </div>
  <div class="cell">
    <a href="#" onclick="return false;" class="color purple" data-color="hsl(305, 100%, 48%)"></a>
  </div>
  <div class="cell">
    <a href="#" onclick="return false;" class="color white" data-color="hsl(331, 95%, 100%)"></a>
  </div>
  <div class="cell">
    <a href="#" onclick="return false;" class="color gray" data-color="hsl(359, 0%, 42%)"></a>
  </div><div class="cell">
    <a href="#" onclick="return false;" class="color black" data-color="hsl(359, 100%, 0%)"></a>
  </div>
  
  
  
  
  
  
  
  </section>

script.js

console.clear();
const canvas = document.querySelector("#draw");
const ctx = canvas.getContext("2d");

// Context
ctx.strokeStyle = "#BADA55";
ctx.lineJoin = "round";
ctx.lineCap = "round";

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

// Set width and height to the window size
window.onload = () => {
  canvasSize();
  this.addEventListener("resize", canvasSize);
}
canvasSize = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function draw(e) {
  if(!isDrawing) return;
  // Color
  ctx.strokeStyle = `hsl(0%, 100%, 50%)`;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  
  // ES6 Declare 2 variables in one line
  [lastX, lastY] = [e.offsetX, e.offsetY];
  
  // Reset Hue if over 360
  //if hue is greater than 360, set hue to 0
  hue > 360 && (hue = 0);
  hue++
  ctx.lineCap = "round";
  // Change Line Width
  //if line width is greater than 10 or less than 1, flip the boolean
  // (ctx.lineWidth >= 10 || ctx.lineWidth <= 1) && (direction= !direction);
  //if direction is true, increment width. If false, decrement width
  // direction ? ctx.lineWidth++ : ctx.lineWidth--
  
}

// Events
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mouseout", () => isDrawing = false);


// Playground
const slider = document.querySelector("#range", addEventListener("input", (e) => {
  ctx.lineWidth = parseInt(e.target.value);
  let label = document.querySelector(".rangeLabel");
  label.innerHTML = `${e.target.value}px`;
}));

// Colors
var colors = document.querySelectorAll(".color");
colors.forEach((color) => {
  color.addEventListener("click", setColor);
});

function setColor(){
  let color = this.getAttribute("data-color");
  ctx.strokeStyle = color;
}

style.css

input {position: fixed; top: 2vw; left: 4vw; margin: 0 0 0 30px;}

.rangeLabel {position: fixed; top: 80px; left: 4vw; margin: 0 0 0 30px;}

section {position: fixed; display: inline-block; top: 3px; right: 3px; border: 1px solid #252525; max-width: 60px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: opacity 300ms ease; opacity: .35;}
section:hover {opacity: 1;}
section > div.cell {flex: 1 1 50%;}
section > div.cell a.color {display: block; width: 30px; height: 30px; transition-delay: 0; transition-duration: 300ms;}
section > div.cell a.color:hover {box-shadow: inset 0 0 0 3px #fff;}

/* Color */
section > div.cell a.color.blue {background: blue;}
section > div.cell a.color.red {background: red;}
section > div.cell a.color.yellow {background: yellow;}
section > div.cell a.color.green {background: green;}
section > div.cell a.color.lightblue {background: #00f5f1;}
section > div.cell a.color.orange {background: hsl(35, 100%, 48%);}
section > div.cell a.color.purple {background: hsl(305, 100%, 48%);}hsl(359, 100%, 98%)
section > div.cell a.color.white {background: hsl(359, 100%, 98%);}
section > div.cell a.color.white:hover {box-shadow: inset 0 0 0 3px #000;}
section > div.cell a.color.black {background: hsl(359, 100%, 0%);}
section > div.cell a.color.gray {background: hsl(359, 0%, 42%);}
hsl(359, 100%, 0%)