Using canvas to layer animated and static content - javascript

I would like to have the fireworks from https://codepen.io/haidang/pen/WRGXJv overlaying the interactive table+button from https://codepen.io/kimaro/pen/BjqYeo.
I have tried using two canvases, where the canvas for the fireworks has
z-index=1
and the canvas for the table+button has
z-index=0
I tried changing the following in fireworks.js:
ctx.fillStyle = '#000'; //old
ctx.fillstyle = 'rgba(0,0,0,0)' //full transparent background
however the table+button canvas doesn't show for me. additionally, when changing the fillstyles for fillrect methods to be transparent, the background of the firework canvas changes colour randomly.
Additionally, if I call the firework js at the end of my html, then I can't click on the button of the canvas layer underneath.
Edit: As has been pointed out by Archer, the button would have to be on the top canvas layer. In this case, the background of the table+button layer would have to be transparent, whilst the layer underneath has the desired background colour.
Edit 2: A friend suggested I could merge the layers, to overcome the issue of the button being on the layer below.

Related

Apply frame image on top of Fabric JS Canvas

I am using Fabric JS to allow the user to have an interactive experience on my React app. Is it possible to apply a frame around a Fabric JS that is taken from an image? For instance, if the canvas is 400x400 px I can resize an image of a frame that is transparent in the middle to 410x410px and apply it on top of the canvas for the user to see? I have attached two images for reference.
Edit: This is the code I am using for zooming in
const zoomIn = useCallback(() => {
// Get original height of canvas
const canvasDimensions = getInitialCanvasSize()
let zoom = HTML5Canvas.getZoom()
zoom += 0.2
if (zoom >= 2) zoom = 2
HTML5Canvas.setZoom(zoom)
HTML5Canvas.setWidth(canvasDimensions.width * HTML5Canvas.getZoom());
HTML5Canvas.setHeight(canvasDimensions.height * HTML5Canvas.getZoom());
}, [HTML5Canvas])
There is no option for canvas's border in fabricjs canvas docs
But you can still achieve this easily using following steps.
PART 1: Creating the Illusion of border
CSS Method
First one can easily create CSS border around the canvas.
Best way to do this is to create div around canvas, as fabricjs split canvas in 2 while running.
You can create slider to control width and color/image for div's border.
This will looks like exactly your second image with customization.
OR
Another Canvas Method
Behind current canvas put this second canvas and control its width and image.
I don't recommend this one, as this will make it more complex to implement.
PART 2: Making Illusion real
If you used CSS METHOD
Now you get what your canvas looks like. You have width of border, image/color of border.
Steps:
Create new canvas (lets' call it 2nd Canvas) of 410px if canvas's width 400px with border of 5px.
Export main canvas as image and put it over 2nd Canvas. And now you can export this as final image.
For 2nd step check my answer on this stack
If you used Another Canvas Method
Directly follow above 2nd step
Export main canvas as image and put it over 2nd Canvas. And now you can export this as final image.
For 2nd step check my answer on this stack

In HTML5 canvas shape change on button click?

I just want to know that is there any website that give brief information about canvas.
I am working on my project. in which one canvas and 4 buttons.
These are four buttons:CIRCLE, RECTANGLE, SQUARE and ANIMATED RAINBOW.
When I click on circle button in canvas animated circle are shown when I click on rectangle button that time circle are changes into rectangle in ease in/out style in animation. Shapes changes into another shapes but in animated style on canvas.
I read lots of article watch many videos but I cannot find a solution.
Below I show an image.
If any one tell me and give me some suggestion where I go for study.
Thank you.
Make 4 different functions in JavaScript circle, rectangle, square, rainbow.
And make 4 different classes in case like that.
Then set the value of convas class according to shape in JavaScript functions.
Like if you click on circle button.
First set HTML code.
<button id = "circle" onclick ="circle"></button>
When user click on this button it will call circle function write code like that in circle function in JavaScript.
function circle(){
canvas = document.getElementById("canvas");
canvas.class = "circle";
//This is class name which you have to make in case
}

javascript - How to clip using drawImage/putImageData

I'm writing an application that needs static clipping for images on the canvas (as you move the images on the canvas the clipping area stays in one place). I have three cases: polygon, ellipse, any shape specified with an image. I was able to cope with polygon and ellipse, because I can do them with paths and arcs, but when it comes to a mask specified via an image I'm not sure what to do.
Example shape to clip to:
Let's say I am not able to draw it using paths
So I have it specified with an image, I know how to obtain image data from it. What I'm trying to achieve is to clip everything that is out of that figure.
I was trying like this:
canvas.clipTo = function (ctx) {
ctx.drawImage(shape.src, left, top);
};
And like this:
canvas.clipTo = function (ctx) {
ctx.putImageData(imgData, left, top);
};
Of course none of them work as I expect, it just draws that black shape instead of clipping to that region.
Any ideas how to do it?
I do it by creating a new canvas the same size as the mask image. Then draw the image on that canvas, then set the ctx.globalCompositeOperation to "destination-in" draw the mask over the image (masking it) , then draw the that canvas to the on-screen canvas with ctx.drawImage
As this is most definitely a duplicated question I will not give the answer as code, it's been done to death here on stackoverflow.
Oh and I forgot. Using imageData to clip is a very inefficient way to do it.

Adding background to transparent image

I need to export my chart created in canvas as image file. I managed to do it but the image is transparent (no background). My question is, is there a way with code to add background color to existing image i got from canvas?
Example:
Canvas in browser:
Canvas when exported as .png:
You have several ways to accomplish your task.
By far the easiest is to fill the entire canvas with a background color before starting to draw your chart. Hint: you don't show code, but do this easy solution if possible. ;=)
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
If you can't fill-before-starting, you still have some options.
You can save the chart to another canvas, fill the entire main canvas with background color and then redraw the saved chart back onto the main canvas.
// create a second canvas and draw the chart onto it
var secondCanvas=document.createElement('canvas');
var cctx=secondCanvas.getContext('2d');
secondCanvas.width=canvas.width;
secondCanvas.height=canvas.height;
cctx.drawImage(mainCanvas,0,0);
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// redraw the saved chart back to the main canvas
context.drawImage(secondCanvas,0,0);
You can use compositing to cause new drawings to be drawn behind existing pixels. The draw the entire background and it will appear behind the existing chart.
// set compositing to draw all new pixels (background) UNDER
// the existing chart pixels
context.globalCompositeOperation='destination-over';
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// always clean up ... reset compositing to default
context.globalCompositeOperation='source-over';
There is no need to use JavaScript, just give the image a background color using CSS.
<style>
img {
background-color: black;
}
</style>
<img src="...">
See this JSFiddle for another example: https://jsfiddle.net/3jch7z94/1/

How to clear rectangle on Image in Canvas

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.
Can someone tell me how to clear a rectangle on image without damage the existing image.
I have used following methods to clear rectangles but didn't work.
1) context.fillStyle ="white";
2) context.clearRect(xCoordinate, yCoordinate, 10, 08);
Thanks in advance!
Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.
#backed-canvas{
background-image: url(http://www.placebear.com/300/200);
}
JSFiddle example: https://jsfiddle.net/yLf5erut/
There is one thing you can do.
When create a rectangle on the canvas just get the image data like:
var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);
and draw the rectangle.
When clearing out the rectangle just place then image data back like this:
context.putImageData(imgData, xCoordinate, yCoordinate);
I suggest using 2 canvas elements one over another.
So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

Categories