JavaScript context.arc() not drawing a Circle, but an Oval instead [duplicate] - javascript

This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Closed 5 months ago.
Hello I have a simple question. I am trying to draw a circle with ctx.arc(), but the output is always an oval. May I know what is my mistake here?
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 130, 100, 0, Math.PI * 2);
ctx.fill();
#canvas {
border: 1px solid black;
width: 640px;
height: 640px;
}
<canvas id="canvas">My Canvas</canvas>

The canvas needs to know the number of logical pixels in both height and width to draw the shapes in the right dimensions.
Explicitly set the width and height property of the canvas to fix the drawing.
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 640;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 130, 100, 0, Math.PI * 2);
ctx.fill();
#canvas {
border: 1px solid black;
width: 640px;
height: 640px;
}
<canvas id="canvas">My Canvas</canvas>
Alternatively you could also set the properties as attributes in your HTML.
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 130, 100, 0, Math.PI * 2);
ctx.fill();
#canvas {
border: 1px solid black;
width: 640px;
height: 640px;
}
<canvas id="canvas" width="640" height="640">My Canvas</canvas>

Related

globalAlpha not working with globalCompositeOperation on Safari

I am trying to render two rectangles one on the top of other inside canvas element with globalCompositeOperation set to 'source-out' and globalAlpha set to 0.2. However globalAlpha is not working on Safari and the outer rectangle in getting rendered with opacity 1.
Below is the code.
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
ctx.globalCompositeOperation = 'source-out';
ctx.beginPath();
ctx.rect(200,200,400,400);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 0.2;
ctx.beginPath();
ctx.rect(0,0,800,800);
ctx.closePath();
ctx.fill();
body {
background-color: white;
margin: 0;
}
.canvas-container {
position: relative;
width: 75%;
height: 0;
margin: auto;
margin-top : 50px;
padding-bottom: 75%;
}
.canvas-container .canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="canvas-container">
This is canvas container
<canvas id="canvas" class="canvas" width="800" height="800"></canvas>
</div>
</body>
</html>
I can definitely reproduce the bug, and being a bug, the only true solution is to report it in the hope it gets fixed.
Now, there are a lot of workarounds available.
The first one is to use a semi-transparent fillStyle rather than globalAlpha:
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.beginPath();
ctx.rect(0,0,400,400);
ctx.fill();
canvas { border: 1px solid; }
<canvas id="canvas" class="canvas" width="400" height="400"></canvas>
But this may not be really practical, for instance if you have complex gradients or even patterns as fillStyle.
A second workaround is to use the fillRect() method, which is not affected by the bug.
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();
ctx.globalCompositeOperation = 'source-out';
ctx.globalAlpha = 0.2;
ctx.fillRect(0,0,400,400);
canvas { border: 1px solid; }
<canvas id="canvas" class="canvas" width="400" height="400"></canvas>
But this will obviously only work for rectangles, and not for any other shapes.
So a third workaround, which is probably the best one, consists in drawing the other way: first draw the semi-transparent contour, then the hole:
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
// first the contour
ctx.globalAlpha = 0.2;
ctx.beginPath();
ctx.rect(0,0,400,400);
ctx.fill();
// now the hole
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();
canvas { border: 1px solid; }
<canvas id="canvas" class="canvas" width="400" height="400"></canvas>
But if for some reasons you can't even do that, then a last resort workaround is to use a second canvas on which you'll draw your shape and do the compositing through drawImage(), which isn't affected either by this bug:
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
const copy_ctx= el.cloneNode().getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();
copy_ctx.beginPath();
copy_ctx.rect(0,0,400,400);
copy_ctx.fill();
// we can set the alpha either here or while drawing
// on copy_ctx, it doesn't change much, both work
ctx.globalAlpha = 0.2;
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(copy_ctx.canvas,0,0);
canvas { border: 1px solid; }
<canvas id="canvas" class="canvas" width="400" height="400"></canvas>

How to Center Image above another image inside canvas element

I'm trying to add Images above another image in the canvas element
What I'm trying to reach:
Here is what I get:
images source: https://imgur.com/gallery/jaSdhQ9
and this my code:
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,0,0 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>
you can set this like ctx.drawImage(draw,100,30,90,50 );
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,80,25,135,55 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas"></canvas>
I think what you're looking for it's flex-box
#canvas{
display:flex;
justify-content: center;
align-content: center;
}
Here you can read more about the flex-box
thanks to #tokage-dizayn and https://stackoverflow.com/a/19473880/7511165
I came to this code
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
console.log(draw.height,draw.width);
var maxSize = 160;
var ratio = Math.min(maxSize / draw.width, maxSize / draw.height);
var width= draw.width*ratio,
height= draw.height*ratio;
console.log(ratio,width,height);
ctx.drawImage(draw,95,90,width,height);
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>

How do I ensure canvas is contained in viewport

I have a canvas that is the only thing on a page I want really want to see. I'm trying to make it such that when I resize my window, I always have the entire canvas viewable with no scroll bars and maintain the aspect ratio.
MCVE
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width;
let h = canvas.height;
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
background-color: white;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
div#canvasDiv {}
canvas#canvas {
display: block;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="canvasDiv">
<canvas id="canvas" width="500" height="500" />
</div>
</body>
</html>
All here at jsfiddle
With this attempt, it rescales just fine when I resize the width. However, when I resize the height, I get overflow.
Resize Width with appropriate rescaling
Resize Height with unwanted overflow
You may like to read this article: [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width;
let h = canvas.height;
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
background-color: white;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
canvas#canvas {
display: block;
margin: auto;
position:absolute;
top:0;bottom:0;
left:0;
right:0;
}
<div id="canvasDiv">
<canvas id="canvas" width="500" height="500"/>
</div>

make a shape in canvas appear after 5s

I have 2 circles in the html canvas element, which I drew with Javascript. I want to make the first circle appear after 5 seconds.
I was wondering if you need to do this with Javascript and if so, how do you do this?
See the code for reference:
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(30, 75, 20, 0,Math.PI*2);
ctx.stroke();
ctx.closePath;
ctx.beginPath();
ctx.arc(100,75,20,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
#canvas1{
width: 300px;
height: 150px;
border: 1px solid black;
margin-top: 100px;
}
<canvas id="canvas1"></canvas>
use setTimeout method when the shape is created
setTimeout(function() {
ctx.beginPath();
ctx.arc(30, 75, 20, 0,Math.PI*2);
ctx.stroke();
ctx.closePath;
ctx.beginPath();
ctx.arc(100,75,20,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
},5000)
You can use global function setTimeout, e.g. like this:
var c = document.getElementById("canvas1")
var ctx = c.getContext("2d")
function circle(a1, a2, a3, a4) {
ctx.beginPath()
ctx.arc(a1, a2, a3, a4 ,Math.PI*2)
ctx.stroke()
ctx.closePath()
}
setTimeout(circle, 5000 /*time in ms*/, 30, 75, 20, 0)
circle(100, 75, 20, 0)
#canvas1{
width: 300px;
height: 150px;
border: 1px solid black;
margin-top: 100px;
}
<canvas id="canvas1"></canvas>

Why html5 canvas circle x doent corresponding to the X i given

My problem is I try to paint circles in an X position of a canvas and always painted with a difference of more than 100px I give. I see no pattern in terms of pixel added. The position of X given is that I need regarding this painting canvas where I do not need 100px or more. Leave a basic code sample.
Style
.defaul_paint
{
margin:1px auto;
overflow:hidden;
text-align:center;
float:right;
background:#394147;
max-width:660px;
width:660px;
height: 30px;
margin-bottom: 2px;
}
.paint{
margin:1px auto;
overflow:hidden;
text-align:center;
float:right;
max-width:660px;
height: 340px;
margin-bottom: 2px;
background:#394147;
}
JavaScript
function paint(xx, yy, radio, begin, grades, booleanVar, context) {
context.arc(xx, yy, radio, begin, (Math.PI * 2), booleanVar);
circle = new Circle(xx, yy, radio);
circles.push(circle);
}
function testing() {
var canvas, ctx;
canvas = $('.paint')[0];
ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFF';
ctx.beginPath();
paint(47, 5, 5, 0, Math.PI * 2, true, ctx);
ctx.closePath();
ctx.fill();
}
HTML
<article class="defaul_paint">
<canvas class='paint'>
</canvas>
</article ">
Don't use CSS to resize your canvas--this will cause your pixels to be stretched.
Instead, resize the canvas element itself. This will add pixels to the canvas.
You don't show your Circle "class" here's a example code: http://jsfiddle.net/m1erickson/VkV9n/
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
window.onload = function() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function Circle(x,y,radius,fill){
this.x=x;
this.y=y;
this.radius=radius;
this.fill=fill;
}
Circle.prototype.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx.closePath();
if(ctx.fillStyle!=this.fill){ctx.fillStyle=this.fill;}
ctx.fill();
};
var c1=new Circle(150,150,100,"skyblue");
c1.draw();
}; // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Categories

Resources