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

Canvas drawImage with high quality - Javascript

I'm using konva.js to draw elements on an HTML Canvas. When the user finishes its design in the canvas, the creation can be exported into a PDF file. In this context, my HTML structure is the following:
a div "canvas" to append all the canvas
a div "canvas0/canvas1" and so on to append each konva-canvas
an auto-generated div "konvajs-content"
and finally, multiple canvases depending on the number of layers
So, to export the PDF I have to go through each div "canvas + number" and then go through each canvas childNodes to use the getContext('2d') and drawImage function to draw an Image with the contents of each canvas (hopefully this description is not too confusing...).
Well, I'm able to export the pdf with multiple pages according to the number of canvases drawn, but the image drawn from the canvas has very low quality. Finally, my doubt is, how can I export it with higher quality?

Theres a clever trick to i crease the resolution.
step 1
make your canvas twice bigger like this:
canvas.width=innerWidth*2;
canvas.height=innerHeight*2;
step 2
to make canvas cover entire width set its width and height from css like this:
canvas{ width:100%; }
thats it . At the end you will have doubled the image resolution and make sure you use width:100%; in css not as its attribute in html.
Hope that works for you.

If you are using Konva you should use its method to do an export.
stage.toDataURL()
If you want to increase quality of output image you can use pixelRatio property.
// it will produce 4x bigger image
stage.toDataURL({ pixelRatio: 2})
https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html

How to crop images in React Native, so that it'll be like a circular shape instead of rectangle one?

I do have some pictures, and I need to crop them in a circular shapes before using them in React Native to use as ViroImage in react-viro (a library that render 360Images).
I can not apply much styles to the pictures and the borderRadius doesn't seem to solve my problem.

create a container with border radius = 30 and then place your image inside it

I've created react-native-image-tools-wm library when I had to process an image on the client and couldn't find anything worth using. Try it.
Example:
const image = Image.resolveAssetSource(require('./my-image.jpg)).uri;
const maskImage = Image.resolveAssetSource(require('./mask-image.png)).uri;
RNImageTools.mask(image, maskImage).then(({ uri, width, height }) => {
// Sync with your app state
});
Please note that your mask image should be black on white on iOS and black on transparent on Android. Black part will be replaced with your image and white/transparent will become transparent. You can use .android and .ios suffix on names and RN will load them conditionally.
You can also create a mask using createMaskFromShape method but you'll have to generate shape points yourself.

How to get image size dyamically w/ mutliple instances?

I am using a FileReader to populate my images.
// i.e. .... e.target.result
If i set an image element source like this:
pic_upload_area.src = some_image;
I can get its dimensions like this:
width = pic_upload_area.clientWidth;
And things work fine. However if I now reset it to a new image like this:
pic_upload_area.src = '';
pic_upload_area.src = new_image;
and once again get the image like this:
width = pic_upload_area.clientWidth;
I find that it still has the old image width, and the new image has been malformed to fit the old image's dimensions.
I find it strange that it works only on the first attempt. How can I get clientWidth to update when I update the .src attribute of the image?

The easiest way is to delete and recreate pic_upload_area. Once its dimensions are set, new image src will conform to the old dimensions.

Is there a way to get crisp (instead of fuzzy) blown-up RGraph bar charts?

I am working with a copy of http://www.rgraph.net/demos/bar04.html in which the canvas has no height and width specified in its attributes, but set in CSS to have height and width of 100%.
At present the rendered image looks like it was graphed crisply at a low resolution and then blown up; the screen has the same sort of fuzziness you'll get from zooming too far in on an image in a browser.
Is there any way to adapt and configure RGraph so the image is crisp when the graph fills a screen?

Changing the size of the canvas with CSS will just scale it rather than change the innate resolution. To change the resolution set the width and height properties of the canvas. You can either do this in the markup, or you can set it in script:
var cvs = document.getElementById('cvs');
cvs.width = 1200;
cvs.height = 500;

As well as hard-coding the values you could determine the window size when the page has loaded (eg with jQuery) and then set the width/height attributes to that.