Internet Explorer - IE9 Includes Hardware Accelerated Canvas

[AWS]

var ctx0, ctx1;

var canvas0, canvas1;

var wave = 1;

var direction = 1;

var timer;

var HEIGHT2 = 100, WIDTH2 = 400;

var count = 0;

var currentX = 0, currentY = 0, lastX = 0, lastY = 0;

var r = Math.floor(Math.random() * 255) + 70;

var g = Math.floor(Math.random() * 255) + 70;

var b = Math.floor(Math.random() * 255) + 70;

window.onload=init;

 

function init() {

// Check to see if canvas is supported

if (!document.createElement('canvas').getContext) return;

 

// Set up canvas0

ctx0 = document.getElementById("canvas0").getContext("2d");

ctxWidth = document.getElementById("canvas0").width;

ctxHeight = document.getElementById("canvas0").height;

 

// Set up canvas1

canvas1 = document.getElementById("canvas1");

ctx1 = canvas1.getContext("2d");

ctx1.lineWidth = 25;

ctx1.lineCap = "round";

 

// Add event handlers

if (canvas1.addEventListener) canvas1.addEventListener("mousemove", OnMouseMove, false);

else if (canvas1.attachEvent) canvas1.attachEvent("onmousemove", OnMouseMove);

 

// Start the renderLoop

timer = setInterval(renderLoop, 16);

 

}

 

function OnMouseMove(e) {

 

if (typeof e == 'undefined') e = canvas1.event;

if (typeof e.offsetX != 'undefined' && typeof e.offsetY != 'undefined') {

currentX = e.offsetX;

currentY = e.offsetY;

}

else {

var relPos = getRelativePos(e.clientX, e.clientY);

currentX = relPos[0];

currentY = relPos[1];

}

}

 

// My thanks to QuirksMode.org for the insight here

function getRelativePos(x, y) {

var curleft = curtop = 0;

 

var obj = document.getElementById('canvas1');

if (obj.offsetParent) {

do {

curleft += obj.offsetLeft;

curtop += obj.offsetTop;

} while (obj = obj.offsetParent);

}

 

// Webkit isn't compliant with CSS OM View here; thus, we need to grab scrollTop from body instead of documentElement

 

if (document.body.scrollLeft > 0) {

var scrollLeft = document.body.scrollLeft;

}

else {

scrollLeft = document.documentElement.scrollLeft;

}

 

if (document.body.scrollTop > 0) {

var scrollTop = document.body.scrollTop;

}

else {

scrollTop = document.documentElement.scrollTop;

}

 

return [(x - curleft + scrollLeft), (y - curtop + scrollTop)];

}

 

function drawLines(ctx, x, y) {

ctx.save();

ctx.beginPath();

ctx.moveTo(lastX, lastY);

ctx.lineTo(x, y);

ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ", 1)";

ctx.stroke();

ctx.restore();

}

 

function clearLines(ctx) {

// Clear first

ctx.fillStyle = "rgba(0,0,0,0.05)";

ctx.fillRect(0, 0, WIDTH2, HEIGHT2);

 

// Change up color

if (count++ > 50) {

count = 0;

r = Math.floor(Math.random() * 255) + 70;

g = Math.floor(Math.random() * 255) + 70;

b = Math.floor(Math.random() * 255) + 70;

}

}

 

function renderLoop() {

 

// Draw lines

clearLines(ctx1);

drawLines(ctx1, currentX, currentY);

lastX = currentX;

lastY = currentY;

drawSimpleShapes(ctx0);

}

 

 

function drawSimpleShapes(ctx) {

 

// Draw background

if (wave >= 60 || wave