Develop Reference

Changing canvas background

I have HTML5 canvas drawing app and I need to change it's background color when user clicks a button.
Background-color on canvas is working on user-side, but user can save the image to server and I'm exporting canvas data using canvas.toDataURL('image/png'). Problem is, background color of canvas is not included, it only sends data user drawn.
I thought about putting big retangle over whole canvas, but that overwrites all drawings already made. Any ideas?

If you want to add the background after you already have drawn something on the canvas, you could add another canvas with the same size and with "display:none" - then, before sending the image, just fill the temporary canvas with your main canvas element's background color from the CSS, then draw the main canvas onto the temporary one.
Finally, send to server the composite from the temporary canvas rather than the bitmap of the main canvas that has the transparent background.

You're not showing any code, but: You need to draw the background using it's context. Setting the background using CSS will as you already discovered not include it when you extract the image.
Canvas is simply put two parts: the canvas element itself and its bitmap. Using CSS affects the element but not the bitmap. Therefor, you need to update the bitmap usually through its context or using the pixel buffer for it to become a part of the bitmap.
Do the following:
At initialization, draw the background using for example fillRect()
Draw your remaining graphics on top
Extract using toDataURL()

kineticJS createImageHitRegion for sprites, not images

I am using KineticJS and wish to create a precise image hit region (ignore transparent pixels) for my sprites. I see how createImageHitRegion accomplishes this for images, but I don't see how to apply this to sprites. Said another way, while method createImageHitRegion is a method which accomplishes what I want for images, there appears no similar method for sprites. If I could create an image hit region on just one image of each of my sprite that could work for me, but a big rectangular region which encompasses the entire width and height of the image of the sprite can't work. Any ideas for a workaround? Perhaps I've missed something?

There's no easy way hit-test non-transparent pixels on sprites.
I can think of a couple of theoretical workarounds...
If you can draw a path outlining the pixels you want to hit.
The sprite object allows a custom drawHitFunc so you could use mySprite.afterFrame to redefine a custom hit area for each of your sprite images.
mySprite.afterFrame(0, function() {
mySprite.setDrawHitFunc(function(){
// draw the path you want used for frame#0
});
});
// repeat for all frames
If you can't draw a path outlining the pixels you want to hit.
Instead of using sprites, make your own sprites using individual images.
Do that by creating a series of images (including createImageHitRegion) and sequentially making one of those images visible so it appears to be playing a spritesheet.

How to re-draw a particular portion of canvas?

I'm creating an HTML 5 game using the <canvas> and JavaScript.
In my canvas I'm loading high resolution images. In each Minute there will come some objects to this canvas. If user clicks on it. It'll be removed from the screen.
My issue:
I'm using clearRect() function for clearing the canvas. And again re-draws all images. Is it necessary that each time I re-draw the entire content ? Is there any option to re-draw that particular area ?
When I used the clearRect() to clear the exact area of that object. The background image also got removed. Is there any way to save the particular portion of background image and draw that portion with this saved image ? (Because my objects are moving on the canvas, I need to retreive the image data dynamically)
I'm new to WebTechnology and HTML 5. So please help me. Thanks in advance

There are a few canvas layer libraries that adds support for the layers:
CanvasLayers
CanvasStack

Think of the canvas as a painting, it is not possible to remove a "layer" of content once it has been applied. You can specify a portion of the canvas to clear using clearRect(x,y,height,width), but you will always need to redraw the background of what you deleted. The drawImage() function takes arguments to draw a specific portion of an image in a specific location, but perhaps more along the lines of what you are looking to use is imageData.
I suggest you do some reading up on the canvas here Mozilla Dev Network: Canvas

HTML5 Canvas animation issue

I am experimenting with HTML5 Canvases in an attempt to create some animation. My ultimate goal is to be able to animate a box to a particular location at whim, for now im just animating it across the screen. When I move it across the screen I geta black trail left behind, how do I clear this "dirty" section without removing the background grid?
A jsFiddle of the code is here

Two solutions
Redraw the background on the top of animation before moving it to the new location. This so called dirty sprite technique - faster - more complex.
Redraw the whole canvas between frames
If drawing the background is a complex operation just hold a prepared background buffered in another canvas for speed.

You have to clear what you've drawn if you don't want it to be visible. I assume you don't want to clear entire canvas to avoid redrawing grid and spending CPU cycles. You'll have to do this differently.
Possible solutions:
have two same onscreen canvases one over the other. Draw grid on canvas below and don't clear it. Clear part of top canvas and redraw on it.
have one on-screen and one off-screen canvas. Draw grid on off-screen canvas. Each time you animate, clear whole on-screen canvas, copy prepared grid from other one, and draw what you need over it.

Change background image in HTML5 canvas

I need to change background image in HTML5 canvas.
I want to use 2 different thumbnails as buttons and when I click on one of the images the background should be change to that particular image.

Technique 1
On click of the appropriate buttons set a unique CSS class on your <canvas> element.
Use CSS to apply a background image to your canvas.
Drawing commands and erasing your canvas will not affect the CSS-applied background image behind your content.
Technique 2
Write a redraw() function that knows how to erase the canvas and regenerate your drawing, including determining what image to draw as the background first.
On click of the buttons set a variable and re-invoke your redraw() function. It will erase your canvas and use the variable to draw the correct image.