How do i tint an image with HTML5 Canvas ?

Posted by djdolber on Stack Overflow See other posts from Stack Overflow or by djdolber
Published on 2010-04-22T07:31:34Z Indexed on 2010/04/22 7:33 UTC
Read the original article Hit count: 223

Filed under:

html5

|

canvas

|

2d

My question is, what is the best way to tint an image that is drawn using the drawImage method. The target useage for this is advanced 2d particle-effects (game development) where particles change colors over time etc. I am not asking how to tint the whole canvas, only the current image i am about to draw.

I have concluded that the globalAlpha parameter affects the current image that is drawn.

//works with drawImage()
canvas2d.globalAlpha = 0.5;

But how do i tint each image with an arbitrary color value ? It would be awesome if there was some kind of globalFillStyle or globalColor or that kind of thing...

© Stack Overflow or respective owner

Related posts about html5

Is there a HTML5 Validator plugin for Firefox?

as seen on Super User - Search for 'Super User'
Is there a plugin for firefox to validate HTML 5? I've always used this but if my webpage has a <!DOCTYPE HTML> doctype it complains about it not having a doctype at all. >>> More
HTML5 video tag in chrome - wmv

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Al, I need to make a page which displays a video. Firefox and and Opera support the OGG format, no problem there. Chrome is ... "stupid" and does not recognize OGG. Does Chrome on Windows know how to handle WMV? I already have them encoded, and no I cannot recode new videos since the media is… >>> More
HTML5 cache manifest: whitelisting ALL remote resources?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm doing an iPhone version of a desktop site that includes a blog. The blog often embeds images from other domains (the image URLs always start with http:// in this case, obviously), but because I'm using cache-manifest, these images don't load because they aren't declared in the manifest file. I… >>> More
Learning HTML5 - Sample Sites

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Part of the challenge with HTML5 is understanding the range of different technologies and finding good samples. The following are some of the sites I have found most useful. IE TestDrive http://ie.microsoft.com/testdrive/ A good set of demos using touch, appcache, IndexDB, etc… >>> More
Online video tutorials for HTML 5

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Here are some of the best introductory HTML5 videos I have found online/for free. Mix 2011: HTML5 for Skeptics - Scott Stansfield channel9.msdn.com/Events/MIX/MIX11/EXT21 Filling the HTML5 Gaps with Polyfills and Shims - Ray Bango channel9.msdn.com/Events/MIX/MIX11/HTM04 50 Performance… >>> More

Related posts about canvas

Canvas context used but not updated on canvas

as seen on Stack Overflow - Search for 'Stack Overflow'
I am developing an small html5 game, where I have the following code: if(object.blocks){ var blocks = object.blocks, that = this; each(blocks,function(index){ that.blocks.push(new Block(this[index])); }); } I receive an object with some configuration and instantiate blocks… >>> More
Clearing canvas with Canvas.drawColor()

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm attempting to change the background image of a custom View with some success. The image will change but the problem is that I still see traces of the old image. When I attempt to clear the canvas before drawing the new image, it doesn't appear to work. I create a bitmap to store the image.… >>> More
HTML 5 Canvas - Dynamically include multiple images in canvas

as seen on Stack Overflow - Search for 'Stack Overflow'
I need to include multiple images in a canvas. I want to load them dynamically via a for-loop. I tried a lot but in the best case only the last image is displayed. I check this tread but I still get only the last image. For explanation, here's my latest code(basically the one from the other post): … >>> More
WPF Constrain the resize of a canvas' child object to the dimensions of the canvas

as seen on Stack Overflow - Search for 'Stack Overflow'
Given the following XAML: <Window x:Class="AdornerTesting.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="500" Width="500" Loaded="Window_Loaded"> <Grid… >>> More
place and show pixel in the Cartesian plane graph in JavaFX

as seen on Stack Overflow - Search for 'Stack Overflow'
I have this method to draw the Cartesian plane in JavaFX, using canvas and would like to know if it is possible to place or show the pixel: public class Grafics extends StackPane { private Canvas canvas; public void Grafics(){ GridPane grid = new GridPane(); … >>> More