Tag Archives: canvas

JavaScript30 – Day 8

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 8: Demo - Day 8
  1. Organizing your variables and values as an array: 
    [lastX, lastY] = [e.offsetX, e.offsetY];
    is the same as: 
    lastX = e.offsetX;
lastY = e.offsetY;
  2. hsl— h is for hue (between 0-360), s is for saturation and l is for lightness.
  3. strokeStyle and lineWidth It's ctx.strokeStyle for color, but ctx.lineWidth for width.
  4. direction != direction and direction = !direction - let's assume that direction is true: 
    direction != direction // true isn't equal to true
direction = !direction  // change direction's value to opposite - if true, now be false
  5. Debugging:
    • console.log(canvas)- as it didn't do anything and no spelling mistakes so far - turned out I had accidentally deleted the -tag.
    • inside draw() - console.log(e) after the condition, if I console it before it gives me true and false, but I only want one of them.
    • calling out draw function - addEventListener('mousemove') worked but nothing else didn't care if it was false or true. Possible ways to debug:
      inside function draw(){
	console.log(isDrawing);
	if(isDrawing ="false") return;
}
      It turned out to be spelling mistake in addEventListener('mousedown'),()=> isDARwing = true); and not addEventListener('mousedown'),()=> isDRAwing = true);
Day 8 code on github.