JavaScript canvas generic drawImage

Question

I have been using drawImage to cause some video to explode as taught in this tutorial: http://www.craftymind.com/factory/html5video/CanvasVideo.html

I would like to also be able to manipulate other objects using drawImage. The thing is when I try this on anything other than an image/video (an Iframe for example), I get a type error.

• Is there some way around this?
• Is there a way to get the "pixels" of an arbitrary control on my html5 page?

Answer 1

Simply put, you can't. Canvas is a pixel manipulated sandbox. Other elements on a webpage are rather like vector graphics, you can only manipulate their certain attributes like: width, height, color, position, etc.

But this is considered a good thing. Imagine how much extra work it would mean to render a single page, if everything could be manipulated pixel-by-pixel. Also consider that hardware acceleration is a rather new area, and that websites should run on devices with different computational capabilities.

Even though the hypertext web has gone a long way to become an interactive application platform, yet the technological boundaries are still limiting some areas of competition with visual/performance features of a native app.