Spelling Bubbles Test

by djwelsh

HTML

<canvas id="the-canvas" width="600" height="400"></canvas>
<div id="feedback"></div>

JavaScript

let inc = 0;
let incMax = 314;
let animating = true;
let stack = [];
let mousedown = false;

function draw() {
	
  let canvas = document.getElementById('the-canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (let i = 0; i < stack.length; i++) {
  	
    ctx.fillStyle = stack[i].color;
    ctx.strokeStyle = stack[i].color;
    
    ctx.save();
    ctx.translate(stack[i].transform.x, stack[i].transform.y);
    
    ctx.beginPath();
    
    if (stack[i].leftJoin) {
    	ctx.save();
      
      ctx.moveTo(stack[i].x, stack[i].y + stack[i].radius);
      ctx.lineTo(stack[i].x - stack[i].radius, stack[i].y + stack[i].radius);
      ctx.lineTo(stack[i].x - stack[i].radius, stack[i].y - stack[i].radius);
      ctx.lineTo(stack[i].x, stack[i].y - stack[i].radius);
      
      ctx.restore();
    }
    else {
    	ctx.save();
      
      ctx.arc(stack[i].x, stack[i].y, stack[i].radius, Math.PI / 2, Math.PI, false); // 外の円
      ctx.arc(stack[i].x, stack[i].y, stack[i].radius, Math.PI, 3 * Math.PI / 2, false); // 外の円
      
      ctx.restore();
    }
    
    if (stack[i].rightJoin) {
    	
    	ctx.save();
      
      ctx.moveTo(stack[i].x, stack[i].y - stack[i].radius);
      ctx.lineTo(stack[i].x + stack[i].radius, stack[i].y - stack[i].radius);
      ctx.lineTo(stack[i].x + stack[i].radius, stack[i].y + stack[i].radius);
      ctx.lineTo(stack[i].x, stack[i].y + stack[i].radius);
      
      ctx.restore();
    }
    else {
    	ctx.save();
      
      ctx.arc(stack[i].x, stack[i].y, stack[i].radius, 3 * Math.PI / 2, 0, false); // 外の円
      ctx.arc(stack[i].x, stack[i].y, stack[i].radius, 0, Math.PI / 2, false); // 外の円
      
      ctx.restore();
    	
    }
    
    ctx.stroke();
    
    if (stack[i].hovering) {
      ctx.fill();
    }
    if (stack[i].clicked) {
      ctx.save();
      ctx.fillStyle = 'black';
      ctx.fill();
      ctx.restore();
    }

    ctx.restore();
  	
  }
  
 	if (animating) {
...