Tips and tricks

So lets start with defining the markup:

Canvas Fullscreen Button

  

We don’t need jQuery so you can get rid of that if you want.

Next, we open a script tag and we select the canvas element and it’s appropriate context.

var c=document.getElementById("output2");
var ctx=c.getContext("2d");

We calculate the dimensions of the canvas element and we will draw the button relative to the that size so that if you want later to change the size you won’t swear your past self for not implementing this.

var ctx_w = c.width;
var ctx_h = c.height;
var ctx_pw = ctx_w/100;
var ctx_ph = ctx_w/100;

We set the border width AND draw the square on the center.

var borderw = 30;
ctx.fillStyle="#FF0000";
ctx.fillRect(25*ctx_pw,25*ctx_ph,50*ctx_pw,50*ctx_ph);

Finally we draw the triangles in the corners and we are done.

  ctx.beginPath();
  ctx.moveTo(0*ctx_pw,0*ctx_ph);
  ctx.lineTo(0*ctx_pw,borderw*ctx_ph);
  ctx.lineTo(borderw*ctx_pw,0*ctx_ph);
  ctx.fill();
  ctx.moveTo(0*ctx_pw,100*ctx_ph);
  ctx.lineTo(0*ctx_pw,(100-borderw)*ctx_ph);
  ctx.lineTo(borderw*ctx_pw,100*ctx_ph);
  ctx.fill();
  ctx.moveTo((100)*ctx_pw,(100)*ctx_ph);
  ctx.lineTo((100-borderw)*ctx_pw,(100)*ctx_ph);
  ctx.lineTo((100)*ctx_pw,(100-borderw)*ctx_ph);
  ctx.fill();
  ctx.moveTo((100)*ctx_pw,(0)*ctx_ph);
  ctx.lineTo((100-borderw)*ctx_pw,(0)*ctx_ph);
  ctx.lineTo((100)*ctx_pw,(borderw)*ctx_ph);