I'm trying to get the data from a canvas and set the src attribute of a img element. The problem here is that, the canvas has a background image setted with css, not with canvas methods. Is there any way or method to extract the background image so the toDataURL method could catch it?
Thanks
I guess there is a solid reason why you are not drawing the background image to the canvas itself so I can offer you this solution:
Draw the background-image to a second canvas element positioned below the first canvas.
When you want to take the canvas data and use it create a third canvas (no need to attach it to the DOM or make it visible.
Draw the background canvas onto it and then draw the main canvas on top.
Take the data from the third canvas.
Voila.
Related
I would like to add an animated SVG to a canvas so that the SVG would keep animating in an endless loop without the canvas needing to re-render.
Is that possible at all?
I tried to use drawImage to draw a canvas onto another but it would only update my SVG animation when the whole canvas re-renders.
I am new to canvas. I am wondering if I can take a Fabric JS canvas and put it on time of an existing Fabric JS canvas? If so, I would I do this.
Yes, you can do this. Canvas backgrounds are transparent by default, so you are able to overlap them as layers. Use CSS to put the canvas elements exactly on top of each other.
Make sure, when clearing the top canvas, you use clearRect and not fillRect with a background color (even white), as that would remove the transparency and hide the other canvas.
I have a few charts made in d3js and I would like to add an image to some graph as a backround photo is there a specific function in d3js that can take an image an put it as a backgroud iamge for the svg. I dont want to declare the backroud image in the css.
You'll have to declare the background image as such in CSS -- regardless of whether you're doing this statically or with D3. The only alternative would be to have a floating <img> element that you position appropriately, but that would be needlessly cumbersome.
I have embedded a Video in HTML5 page over a Canvas.
I want to draw a rectangle with mouse events on the Video and rectangle should not be erased.
Please help me how to do this ..
Thanks..
You can create a new Canvas Element just on top of your Video-Canvas. and Handle your mouse events for that new canvas element. and Make sure that you do not set the background property for your new canvas, this will make it transparent and the Video-Canvas elements content will be visible. Let me know if you do not get it.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image