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.
Related
I was browsing the home page of canva.com
I was surprised by the UI effect of hover blur effect on the home screen. How can we develop such a feature on our website. Is it using CSS3 or some other javascript plugin libraries.
Thanks
They use a blurred background image, a canvas and an unblurred version of the image. Moving the mouse 'draws' (a portion of) the sharp image onto an otherwise transparent canvas. This makes it look like some kind of magic, when in reality it's just selectively copying a src image onto a canvas. I imagine a second, off-screen canvas is used to allow the 'drawn' lines to have their opacity faded. This canvas is then used to blend the copied image with the blurred image. Look into "canvas blending modes"
I'm setting up a portfolio webpage, and I want the images to be coloured with a colour from the logo 50% solid until mouseover, which makes the colour fade out and reveal the image properly.
Here's the site so far; www.cmvisual.com
Anybody know how to do this?
It seems like you probably want to put a div with a background color and partial opacity
over the image, and then use a CSS transition (preferably) or Javascript to animate the transition.
Maybe start at half opacity, then go to 0 opacity on rollover.
What you REALLY want is CSS blend modes, but that isn't fully supported yet.
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.
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.
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