In the latest incarnation of Mashape, we’ve added a few goodies for people using modern browsers. One of those is the hover effect on the Mashape logo. We’ve found that the logo hover event is the most fired event and scales with other activity on our site. In this blog post, I’ll be going over some basics of pixel manipulation in the HTML5 canvas.
HTML5 provides a lot of access to browser data that was previously inaccessible. Let’s initialize the canvas:
var canvas = document.getElementById("logoCanvas"),
ctx = canvas.getContext("2d");
The variable “canvas” gets the canvas element from the DOM, and “ctx”…