Canvas Lightbox Overlay - JavaScript - Example 2

gistfile1.js

// JavaScript Document
var room_336 = [409,397,68,36];
var room_339 = [409,302,68,36];
var room_340 = [409,269,68,36];
var room_342 = [409,207,68,36];
var room_343 = [409,176,68,36];
var room_348 = [379,82,35,65];
var room_394 = [585,461,35,65];
var room_588 = [92,82,35,65];
var room_591 = [126,82,35,65];
var room_593 = [158,82,35,65];
var room_595 = [220,82,35,65];
var room_598 = [252,82,36,65];

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

function highlightRoom(x, y, h, w){
  var can = document.getElementsByTagName('canvas')[0];
  var ctx = can.getContext('2d');
  clearCanvas(ctx, can);
  ctx.strokeStyle = '#f00';
  ctx.lineWidth = 5;
  ctx.lineJoin = 'round';
  ctx.strokeRect(x,y,h,w);
}

$(document).ready(function() {
  if(isCanvasSupported()){
    $(".highlight_room a").click(function() {
      var canvas = $(".raumplan");
      var coord = window[$(this).attr("class")];
      highlightRoom(coord[0], coord[1], coord[2], coord[3]);
      if ($(".lb-container").length) { 
        $(".lb-container").html(canvas);
        setTimeout(function() {canvas.css("display", "block");} , 1500); // delays 1.5 sec
      }
    });
  }
});