how to fill with a texture in html5 (and still be able to change the color?)

Question

I'm creating an html5 canvas drawing app.

I want to paint with a gritty texture. I know that I can use fill with a specific image as a texture, but then the color is locked to that image. I still want to be able to change the color via a color picker. I just want the grittiness to come through.

What solutions are available?

Answer 1

Read about my answer to "tinting" an image here: How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

You can always very easily manipulate the pixel data of an image to give off a different hue than its original hue (or no hue at all if you average the RGB, getting a gray-scale image).

So that's at least one option.

What you'd do here: Instead of using an image as the texture, draw the image to a temporary canvas and then modify the hue of that entire canvas with your color picker, than use that canvas as your pattern. (both images and canvases are valid input for creating patterns)