Canvas drawing

by Alon Rotem

HTML

<canvas id="myCanvas" height="500" width="700"></canvas>

JavaScript

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");

function drawSpeaker(drawx, drawy, scale, silent)
{
  ctx.lineWidth = 2 * scale;
  ctx.beginPath();
  ctx.arc(drawx+(19 * scale), drawy+(12 * scale), 4 * scale, -0.5*Math.PI, 0.5*Math.PI, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(drawx+(19 * scale),drawy+(12 * scale), 9 * scale, -0.5*Math.PI, 0.5*Math.PI, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(drawx + (17 * scale), drawy);
  ctx.lineTo(drawx + (17 * scale), drawy + (24 * scale));
  ctx.lineTo(drawx + (10 * scale), drawy+ (17 * scale));
  ctx.lineTo(drawx + (10 * scale), drawy + (7 * scale));
  ctx.lineTo(drawx + (17 * scale), drawy);
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(drawx + (8 * scale),drawy + (7* scale));
  ctx.lineTo(drawx + (2 * scale),drawy + (7 * scale));
  ctx.lineTo(drawx, drawy + (9 * scale));
  ctx.lineTo(drawx, drawy + (15 * scale));
  ctx.lineTo(drawx + (2 * scale),drawy + (17 * scale));
  ctx.lineTo(drawx + (8 * scale),drawy + (17* scale));
  ctx.lineTo(drawx+ (8 * scale),drawy+ (7 * scale));
  ctx.fill();
  
  if(silent)
  {
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 3 * scale;
    ctx.moveTo(drawx,drawy+(24 * scale));
    ctx.lineTo(drawx+ (30 * scale),drawy);
    ctx.stroke();
  }
  return [drawx, drawx + (30 * scale), drawy, drawy + (24 * scale)];
}

/*
---------------------------------------------

DDD    D      DDDD    DDD   D  D
D D    D     D    D  D   D  D D
DDDD   D     D    D  D      DD
D   D  D     D    D  D   D  D D
DDDDD  DDDD   DDDD    DDD   D  D


DDDD  D  D  DDDD  DDDD  D     DDDD
D  D  D  D     D     D  D     D
DDDD  D  D   D     D    D     DD
D     D  D  D     D     D     D
D     DDDD  DDDD  DDDD  DDDD  DDDD

---------------------------------------------
*/
var lettercellsize = 5;
function drawShape(x,y, cells, fillcolor)
{
	ctx.save();
	ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.fillStyle = fillcolor;
  for(var c=0; c <...