We Keep Coding

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

How to separate a rectangle into an equal number of squares?

Let's say I have a <div> rectangle sized 1400x700 pixels. Let's call it a "canvas."
I want to fill it with a number of enlarged "pixels" if you will - squares of random color and opacity. Randomly. Some will fade in, some will fade out. That's easy enough.
The HTML structure should look like:
div#canvas
div.pixel
div.pixel
div.pixel
div.pixel
How do I take the original dimensions of the rectangle and arrive at a number of square divs that are guaranteed to fill the whole "canvas" to the brim?
Before:
After:
The size of the squares should be variable somehow. The idea is to "pixelate" the background image but in an undulating fashion, though that's a mental issue and not a programming one.

Do you really need a seperate dom element for each "pixel"? I'd consider to just use a single element with a custom background gradient like this:
http://lea.verou.me/css3patterns/#checkerboard

Javascript : gauge image effect

I'm making a 2d game using melonJS.
In my game, i have an arrow which rotate on its axis. This arrow is a png image. When i keep the left mouse button, the arrow needs to fill from yellow to red, from the base to the top. Here's an exemple :
The initial arrow is all light red, like the top of the example image. when i keep the button clicked, the arrow color should change from the bottom with a white line as a current position to the top.
How can i do this with javascript ? Is there any things embbeded in melonJS to handle this kind of trick ?

Since your question is text based rather than code based, I'll do the same.
Here is how to draw your rotated changing-gradient arrow
Clear the canvas with context.clearRect.
Rotation: Translate to your desired center-axis coordinate around which you want to rotate. Then Rotate to your desired angle. Transformations (context.translate & context.rotate) will actually rotate the canvas itself. That way all new drawings will be translated (moved) and rotated. Note: Existing pixels will be unaffected.
Drawing the arrow: Draw your arrow with path commands (beginPath, moveTo, lineTo, ... for each piece of the arrow). Since you have already done your transformations (translate & rotate), you don't need to try to rotate your arrow drawings.
Gradient fill for arrow: Create a linear gradient (context.createLinearGradient) that extends through your arrow drawings. Set color stops (context.addColorstop) to create your desired yellow & red gradient along your arrow. Use the gradient as your context.fillStyle and fill your arrow path with context.fill.
Using gradients for the white indicator line You can also use gradients to display your white indicator bar. To do this, draw your arrow and then overdraw with another gradient that is transparent at all places except your desired indicator percentage where it will be white.
var g=ctx.createLinearGradient(0,170,0,0);
g.addColorStop(pct-0.01,'transparent');
g.addColorStop(pct-0.01,'white');
g.addColorStop(pct+0.01,'white');
g.addColorStop(pct+0.01,'transparent');
ctx.fillStyle=g;
ctx.fill();
Always clean up! Undo your transformations. You can undo transformation by either (1) reissuing your transformation commands in reverse order and with negative arguments or (2) resetting every transformation to defaults by resetting the transformation matrix with context.setTransform(1,0,0,1,0,0).
Put your code into a requestAnimationFrame animation loop and change the angle and/or the gradient to meet your design needs.

You can layer two PNG files, one with the arrow, one with the stripe, and control the position of the white stripe that sits on top of the arrow. Canvas should enable that pretty easily by default, and even more so if you're using a library.

Javascript element opacity situation

Let's say i have a div element which opacity is set to 0.5 .
I have a script which function is to draw a rectangle over the div based on the first time the user clicks with the left mouse button on the div element and the way he drags the mouse over the div.
I am trying to figure out how to make the rectangle the user draws to not be affected by the opacity of the div container element.
For example if you upload a photo to google+ there is an option to crop some part of the image so only your face is visible. Thay have this kind of functionality i am looking for. When you draw the part over the image you'd like to crop the image opacity is set to 0.5 for example but the region you are drawing is clearly showing the original style of the image.

the opacity of a wrapping element is inherited by all containing elements,
you could simply solve this by creating a png-image with your desired opacity with size 1x1px and make this as background-image and repeat x and y

I think what you are trying to do is called masking, it can be achieved atleast with svg. You could have one layer with specific opacity and a mask with the rectangle properties to "burn a hole" in the opacity at a desired location.
Take a look at this:
http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property

Adding parallax to scrolling background

I'm making a canvas game where you travel in a spaceship over an endless repreating background. Right now I'm drawing four instances of the background at different positions based off of the player's x/y position, so they will move with the player.
ctx.translate(ax,ay);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,(Math.round(y/720)*720)-720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,(Math.round(y/720)*720)-720,1080,720);
Translating to ax and ay basically allows objects to scroll with the cameras the player moves, since ax and ay are relative to the player's position. I can create a parallax effect by doing this instead:
ctx.translate(ax*.5,ay*.5);
This makes the background scroll slower than other game objects, like I'd like it to. But I still haven't figured out how to adjust the rest of the code to compensate. As the player moves farther from (0,0) he sees less and less of the background, because it seems to go beyond him at a faster rate. How can I fix this?

As an option to markE's answer you don't need to use a second canvas at all (which is a good option to this).
You can simply use CSS for background image and adjust background position with the amount you need.
Demo here
The essential part is simply these lines:
Background X position where -1 can be replaced with the value you want to move it at.
bgx -= 1;
Then for each loop the background position is updated (Y position is fixed in this example):
canvas.style.backgroundPosition = bgx + 'px -30px'; // set X and Y position
When bgx somehow equals the max width of the image you just reset it to the beginning.

Use 2 canvases -- one placed directly on top of the other
A "background" canvas is on the bottom and animates more slowly.
A "game objects" canvas is on the top and animates more quickly.
That way you can create a parallax effect using different animation speeds for each canvas.