Ernest Delgado

Next >

ernest — Sat, 05 Dec 2009 06:02:13 +0000

Rendering Animated GIFs on the Canvas Element

ernest — Thu, 20 Aug 2009 04:59:48 +0000

This is probably as old as the very first implementations of the Canvas Element. But the truth is that I never thought about what could happen if you render an animated GIF in a Canvas through the drawImage method.

The results were somehow the ones I was expecting but the question is: could these be useful at any specific situation? My honest answer is, I don’t really know yet.

I’m back, so is Monkey Island!

ernest — Thu, 11 Jun 2009 09:44:16 +0000

Benchmark on the Floor

ernest — Thu, 05 Feb 2009 07:19:36 +0000

In the projects I have been working lately I’ve had to test the speed of a bunch of JavaScript functions. That was another good excuse for me to read more about different ways of creating benchmarks that I didn’t know of.

There’s one test I want to mention here as it uses those obscure JavaScript syntax tricks that I like so much.

The goal of this test was to find a faster way to run the
Math.floor function to see if we could make some heavy loops of our scripts even faster. Here is where the bitwise operators come into the game. I saw the “~~” trick in a forum thread and I found another two playing for a while with the JavaScript console (all of them round a number the same way). The average of all the A-Grade browsers tests gives us the following results:

Math.floor(n): 15.804
~~n: 8.784
n|n: 8.081
n&n: 12.019

(Average time per instruction in microseconds)

Apparently, the n|n option will be the best
candidate for our purpose. You can test it yourself in your browser:

Car Navigation Map in Canvas

ernest — Tue, 25 Nov 2008 05:32:40 +0000

After browsing through the code of Jacob Seidelin’s Super Mario Kart demo, I was inspired to take the code and attempt to create a GPS-navigation system experience using publicly available roadmap tiles. The final result is a proof of concept that works pretty damn well in Firefox (and not quite that well in other browsers :).

After passing it around to a few friends, I’ve already heard some cool suggestions for taking the demo to the next level. So, please, if this inspires you, feel free to experiment further with the code. Enjoy!

JS Puzzle

admin — Thu, 09 Oct 2008 15:48:42 +0000

Write a function getMax(a,b) that takes two integers and returns the maximum value.
None of the following are allowed: >, <, ==, !=, Math.max, Math.min.


function getMax(a, b) {
 ...
 return max;
}

~~Send your answers here. I will post the solution in a few days.~~

Solution

Chromeflow

admin — Thu, 11 Sep 2008 05:26:47 +0000

Based on the Rafi Adnan’s coverflow+canvas sample posted in Ajaxian, I created a bookmarklet which will add more fun to the Most visited preview of your home page.

Simply drag the link below to your bookmarks bar in Chrome, open up a new tab (with the default home page), and click the bookmarklet to see your history displayed iTunes-style.

Chromeflow

(Press CTRL+B to make the bookmarks toolbar show up)

Drag and Drop without Drag and Drop

admin — Mon, 01 Sep 2008 02:03:36 +0000

While experimenting the other day, I found out about a special behavior of input fields in web browsers. Mixing it up with images and the previous canvas experiment, I came up with a proof of concept that emulates image drag and drop behavior.

As a bonus, it also allows drag and drop between documents.

Demo

Update: Testing the demo in Google Chrome shows a funny highlighting effect when dragging images. Also, they can be dropped only in a small area on the top left of the text area.

Moving Forward

admin — Sun, 24 Aug 2008 04:17:46 +0000

I think it’s worth taking a look where canvas is positioned in the following graph shown by Vic Gundotra at the
last Google IO (2008) when talking about the evolution of the web browser and how to
“Move the web platform forward”:

SXSW 2009

admin — Sat, 16 Aug 2008 08:37:59 +0000

The canvas element has been generating increasingly more interest and
broad web acceptance in the past year - noticeably more than similar
technologies like SVG or VML that have been around for
much longer.

Martin Kliehm has kindly offered me the opportunity to participate in
a dual presentation at the next SXSW to talk about canvas and
demonstrate some interesting uses.

If you are interested in the canvas element, you can cast your vote for
this presentation (until August 29). And while you’re at it, you might also want to cast your vote
for canvas support in IE8.