CODEWITHSUNDEEP
htmlcanvaswebgl
Brandon Frohbieter
Brandon Frohbieter

Reputation: 18139

Textures in CANVAS 2D Context

Just starting to experiment with filling the canvas, and I'm trying to apply a texture to an object (the blobs from the blob example - http://www.blobsallad.se/). This example is using the 2D context, and doesn't appear to be implementing webGL. All the information on texturing I could find uses webGL, and I was wondering how easy it would be to accomplish this feat. Is there anyway I could incorporate the texturing features of webGL to this canvas without rewriting the code? Summed up, I guess this question is asking whether or not the methods available to the 2D context are also available to the webGL context... If so I suppose I could just change the context and apply my texture? If I'm thinking about this all wrong or am confused conceptually, please let me know.

Thanks, Brandon

Upvotes: 2

Views: 9890

Answers (2)

Brian
Brian

Reputation: 826

Are you looking to apply a texture to a 2D shape?

Try something like this http://jsfiddle.net/3U9pm/

Upvotes: 2

Jon Bringhurst
Jon Bringhurst

Reputation: 1338

I've experimented with drawing an image to a 2d canvas before using it as a texture for a WebGL canvas. It works, but the performance is horrible (it really varies from browser to browser). I'm currently considering a few other options for refactoring it. I wouldn't recommend it for anything that more than statically drawing an image to one or two 2d canvases.

You can see an example of the craziness in lanyard/src/render/SurfaceTileRenderer.js in the project at: http://github.com/fintler/lanyard

Upvotes: 2

Related Questions