Canvas border radius using Fabric.js - javascript

I am trying to set border radius for canvas following is my code a set Height is applying perfectly also set Width applying perfectly just having the issue with border radius just tell how to set border radius of canvas using following code.
canvas.setHeight(314);
canvas.setWidth(629);
canvas.setBorderRadius(314.5/157.25);

There's no setBorderRadius method in Fabric.
You can always change border-radius of canvas element via CSS (in supporting browsers).

Related

How to get the actual width of a rotated canvas rectangle

I'm using konva js to make a transformable rectangle. I'm able to access the width of the rectangle using
rect1.getClientRect().height
. However, when I rotate the rectangle, the width property is changing. I believe width property gives the overall horizontal length of the container of the rectangle canvas. Is there any way I can get the actual width of the rotated rectangle. Here's the jsfiddle
The Konva-object has an attrs attribute: rect1.attrs.width * rect1.attrs.scaleX
https://jsfiddle.net/8gack34s/4/
there is also attrs.rotation that you can use to calculate it mathematically.
Konva warning: Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.

Setting the canvas width and height with css shifts the pen

When i'm setting the canvas width and height with css, the pen is beeing shifted. After zooming in/out in the browser (chromium), the pen isn't shifted anymore.
I'm using the literally canvas widget and want to fit the canvas to its parent div. After initializing the canvas, i'm setting the width/height of the canvas with the jquery css function. But my pen isn't at the same coordinates. After scrolling in or out in my current browser, the pen is at the coordinates where my mouse pointer is. Can anyone help me?
$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});
With canvas you usually find you need to actually set the width and height attributes normally, rather than css/style width and heights.
My example with your code shared would be to try:
$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);
Can you also confirm you are intending to set "containerWidth" for the height and width of the canvas?
Regarding resizing the canvas, consider adding some responsive CSS like this, to maintain the position values, but resize for mobile.
canvas {
width: 100%;
height: auto;
}
You will still need the width and height attributes on the canvas itself though.

Apply zoom in center of the canvas

I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:
ctx.scale(2,2) //doubles everything's size
Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:
Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.
You can translate the context by half the canvas size using ctx.translate()
EDIT :
var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)

Scaling a canvas to full screen really decreases the resolution

I'm trying to make a full screen game to help me learn JS. I made a canvas item and streched it to the size of the screen using CSS. Then I draw a circle. The issue I have is that the circle looks terrible!
_draw.arc(20, 20, 10, 0, 2 * Math.PI);
Here is a jsfiddle example. http://jsfiddle.net/H5dHD/152/
I've tried using different scale factors (so _draw.scale) but it dosent seem to matter...
What am I doing wrong?
P.S. I know the coordinates are off. I didn't include that code for the example.
The problem is that you resized the canvas using the CSS-style, and do not change the actual width and height. When you use CSS styling to change the size, the canvas will be stretched, but the internal drawing resolution stays the same. The result is that the canvas blurs.
To change the internal resolution, change the width and height attributes of the canvas HTML element itself.
document.getElementById('iDraw').height = screen.availHeight;
document.getElementById('iDraw').width = screen.availWidth;
Here is your updated fiddle:
http://jsfiddle.net/H5dHD/154/

Scrolling HTML5 Canvas viewport for printing

I am drawing a series of rectangles and text on an HTML5 Canvas. But this canvas will ultimately be printed. The rectangles are drawn according of the height of the paper(canvas)
The only canvas width that doesn't distort the text is the 300dpi or 2400x3300 canvas. This works well for print but its obviously huge on the screen.
I would like the user to have a scaled down version of the canvas on the left side that fits 100% height of the parent container with scroll bars for overflow.
I have tried div overflow:auto.. and this does work but its not scaled (still scrolling a huge version). So basically I would like to scale the image for the browser window but do all drawing/printing from the big canvas.
For this scenario you can use CSS rules with the canvas.
ONLINE DEMO HERE
Keep the pixel size but add the following rules to the canvas element itself (assuming the id of the canvas is canvas):
canvas.style.width = 'auto';
canvas.style.height = '100%';
or apply a CSS rule to the element via CSS and HTML:
.printCanvas {
width:auto;
height:100%;
}
and then in the HTML:
<canvas id="canvas" class="printCanvas" width="2400" height="3300"></canvas>
This should allow the browser to use the actual content of the canvas when printing even when the canvas is scaled down (like with an image).
In this example the canvas will fit the height of parent provided the parent has height defined. You can use as you already do overflow:auto to get scroll-bars.
If you want to show 50% of the canvas inside the parent just set height:200% for the canvas element and so on.
Note that you might loose some details on the screen if the canvas is scaled much but these should show on the print. This would be due to sub-pixeling which kicks in when a pixel is drawn as less than an actual pixel on the screen.

Categories

Resources