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>
Related
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>
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>
Hi i am trying to practice HTML 5 canvas. I just developed the code to make a triangle in a canvas. I am getting the canvas element using javascript and trying to draw a triangle in it. I don't know whats going wrong my javascript file is not getting linked or grabbing the canvas.
Html file code:
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<style>
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="canvas.js"></script>
</head>
<body>
<canvas id="tcanvas">
</canvas>
</body>
</html>
Javascript code to draw in the canvas:
window.onload=init;
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
draw();
init is undefined which means that your draw function is never invoked.
Check working example below which invokes draw on window.onload.
function draw() {
let canvas = document.getElementById('tcanvas');
let context = canvas.getContext("2d");
canvas.fillstyle = "#0000FF";
context.lineWidth = 3;
context.beginPath();
context.moveTo(50, 100);
context.lineTo(150, 100);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.fill();
context.closePath();
}
window.onload = draw;
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
<canvas id="tcanvas"></canvas>
It does, you just have the init that is not defined and breaks up your code.
Possibly is defined elsewhere BUT contains error/s?
Another possible cause can be a canvasjs missing from where you linked it in your html, we cannot check that :)
Browser's console (F12) is your friend in situations like this.
Here is quick working fiddle
Note that this is the preferred way to show your code since it's more testable and easier to jump onto by others.
<canvas id="tcanvas">
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
i have create the canvas which has different background and over that another image in the middle of canvas,now i want to rotate that image at 90 at its place only,i tried lots of code but get nothing as result. how can i do that..??
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg) }
</style>
</head><body>
<button id="clockwise">Rotate right</button>
<canvas width="300" height="300"></canvas>
<img>
<script type="text/javascript" charset="utf-8">
var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 6;
ctx.lineJoin = 'round';
ctx.strokeRect(40,100,150,100);
var angleInDegrees=0;
var img = document.getElementsByTagName('img')[0];
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
ctx.drawImage(img,40,100,150,100);
function drawRotated(degrees){
ctx.clearRect(40,100,150,100);
ctx.save();
ctx.translate(40,100,150,100);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(img,-img.width/2,-img.width/2);
ctx.restore();
}
$("#clockwise").click(function(){
angleInDegrees+=30;
drawRotated(angleInDegrees);
});
</script>
</body></html>
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>