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