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.
Related
I want to add to the background of canvas two or more image loaded in fabricjs. Can i do this?.
How i can do it?
no fabric can only have 1 background image.
I have a lot of images to draw into canvas, what I wanna do is do draw stuff one time, and handle every drawn image's visibility in order as slider.
So, is there anyway to get the reference of every image, and then set property like hidden=true|false on it?
No, html5 canvas does not "remember" where it drew your images so you cannot later reference them to show / hide them. You will have to clear the canvas and redraw the images in their newly desired positions.
I have two canvas one top of another how i can clear only top canvas like a layer.
Example if i use erase tool clear background, i need clear only drawings on top canvas.
picture is Picture link
demo is JsfidleDemo
Your 'foreground' canvas context is being created from your background canvas. Hence why its erasing the background. You should also attach your mouse up event to the html body; if you move off the canvas with the mousedown and mouse up outside the canvas its going to break your logic .
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()
I would like to create an html element with a given background colour, and some text. I would then like to place an image in this div, and where the image overlaps with the text replace the color of the pixels with some other colour. The image below demonstrates the effect I would like to achieve, if we imagine the image is the black blob. However, in real life I want partial overlap of letters to be possible with the same effect (i.e. I don't want to just change the font colour where it overlaps.)
Is this possible, and if so, how?
You can assume the image is a single block colour, and that I know the exact colour as I am creating the image. You may use any web technologies, and the image will be created as a vector image so can be any format, including svg.
Not sure what the browser support is nowdays but you could try this:
http://css-tricks.com/image-under-text/