CODEWITHSUNDEEP
javascripthtmlcanvas
stevebot
stevebot

Reputation: 24005

How does context.drawImage work

In HTML5, using the canvas object you can draw an image. 

context.drawImage(imageObj, x, y);

How does this work under the hood? Is the browser drawing pixels or using svg? I do not see any svg elements being added to the dom, so I am assuming the browser is drawing pixels, but how does it accomplish this all? Is there a library that the browser is using?

For the sake of discussion I guess we could just consider Webkit, but I would also be interested in what other browsers (IE) do.

Upvotes: 0

Views: 170

Answers (2)

Julian Krispel-Samsel
Julian Krispel-Samsel

Reputation: 7734

Canvas is a pixel-based interface, SVG is a markup-language for vector graphics, they are two very separate things.

If you add an image to canvas it loads it first into the dom and then renders it to the canvas.

You can use SVG in conjunction with Canvas though. Say you wanted your canvas app to scale, you could simply rerender your svg files in different sizes to the canvas like described here

Because SVG-graphics can be used like images, they can just be rendered onto canvas like images.

If you want to have more in depth knowledge about canvas just read the spec

Upvotes: 1

markE
markE

Reputation: 105015

Well...you asked!

Think of canvas as a big, living bitmap...and here are the details:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Upvotes: 1

Related Questions