Beej's Bit Bucket

Scratch out the color!

[The demo is the fun part, so just click here now, then come back if you want to know more about the subject. Next time I'll just send people there, and link back to the lengthier description in the blog.  Sorry!]

I haven’t had much time to post lately, but I saw a cool little “scratch off” app go by on Hacker News that I thought could be improved upon by using something in HTML5 canvas known as the “globalCompositeOperation“. So I coded up a demo to show it off.

The globalCompositeOperation affects how canvas drawing routines interact with the data that’s being drawn upon. There are many different operations, but the default is "source-over", which the spec says: “Display the source image wherever the source image is opaque. Display the destination image elsewhere”, which makes a certain kind of sense for what you usually want to do.

Another common mode is "copy", which ignores transparency. As the spec says for “copy”: “Display the source image instead of the destination image.”

But, in fact, there are plenty of modes. And some of them are better-supported than others. For this demo, for example, I wanted to use "source-out". Chrome and Safari seemed to be OK with it, but Firefox just left the canvas blank—not too useful. So instead I fell back on using "source-atop", which I also made to work.

(A completely different approach to this entire problem might be to record the path you’ve drawn and use the clip() method to mask out the image, but I have doubts that would be faster.)

Without further ado, here is the demo.

Some more links:

• Forking vs. Threading—fight! Contains a quick FAQ about why you might choose one over the other.
• iPhone-friendly Websites—useful code snippets.
• HTML5 + CSS3—the future (and desired present) of website construction
• HTML5 canvas cheat sheet—to continue my collection of web-oriented links
• The Mechanical Computers of Hannibal Ford and William Newell—analog computers
• conc lists—organizing data for O(n log n) performance (this example in Erlang)
• Postmortem on the Google AI contest winner—lots of good information
• KOHCTPYKTOP: Engineer of the People—build integrated circuits… as a Communist. No, I’m not clear on the connection, but it seems like an in-depth circuit-building game!
• Sorting a Linked List with Selection Sort—a short-and-sweet blog piece
• The HTML5 Audio Element—quick demo

Your pixels will be manipulated.

In an earlier post, I wrote about a few of the things HTML5‘s <canvas> element could do. This post is about one more of them: direct pixel manipulation. You can basically do the three following things:

1. Create an array of empty pixels, or
2. Get an array of pixels from an existing canvas, or
3. Set the pixels of a canvas from a pixel array

Read more…

An SVG image converted to a PNG and displayed as a lame metaphorical representation of an HTML5 canvas.

There are plenty of tutorials out there on how to use the <canvas> element in HTML5, so I’m not going to spend much time on that.  Instead, we’re going to talk capabilities.  What is <canvas> and what can it do?

This blog entry is, of course, inspired by the whole Flash iPad Jobs Adobe-is-Lazy Is Flash Relevant HTML5 Thing. Here’s my take: is Flash going to be supported on Apple products? No. Is Flash “open” enough to be used? Yes. Can Flash do things HTML5 can’t? Absolutely. Is Flash advancing more quickly than HTML5? Yes. Does HTML5 suck? No. Will apps be written for the iPad in HTML5 in lieu of Flash? No, generally they’ll be native apps, or web apps that take advantage of iPad-specific functionality. Are Apple users mindless sheep? No. Does the canvas tag have great uses? Yes. Is HTML5 as portable as Flash? No. Will it ever be? Not if history is any indicator. Will canvas+video+audio replace Flash? Sometimes, in specific instances when it makes sense, yes. Does Flash crash? Yes. Does it crash a lot? Not for me. Should Adobe make it crash less? Yes. Should Adobe release 64-bit versions of their player for all platforms? Yes. Should Adobe opensource their player? Tricky, but I think yes-like-Linux. (You can work on Gnash if you want it. Adobe has already opensourced their VM, so you can piggyback off that major chunk, too.  An AS3 compiler is free with SWFTools. Vector graphics can be rendered with Cairo. The SWF spec is freely available. So go for it! No, I don’t want to.) Will HTML5 kill Flash? If it gets developers more bang-for-the-buck, then yes. So probably “no”.
Read more…