While using scale in HTML5 canvas, I noticed that sometimes small gaps appear between elements. For example:
context.scale(0.995, 1);
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 0, 100, 100);
Without scale, two rectangles are close next to each other, but with scale, there's tiny gap between. Is there some way to get rid of it without rounding scale factor?
As said in my comment this is a rendering artefact because of antialiasing. As workaround you may use an off-screen buffer which you render un-scaled and then put that image onto your original canvas with correct scaling turned on. If you do so the line should disappear.
The following snippet might give you an idea:
var buffer = document.createElement('canvas');
buffer.width = 200;
buffer.height = 100;
var context1 = buffer.getContext('2d');
context1.fillRect(0, 0, 100, 100);
context1.fillRect(100, 0, 100, 100);
var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
context.scale(0.995, 1);
context.drawImage(buffer, 0, 0);
context.fillRect(0, 120, 100, 100);
context.fillRect(100, 120, 100, 100);
Compare top two rectangles in my example (off-screen rendering) with the bottom ones which were drawn directly onto the canvas.
Related
I want to have html5 canvas text slide in behind nothing, its an effect where text appears like coming out behind some obstacle, but the obstacle is invisible.
Here is some youtube video showing how to do it in after effect:
https://www.youtube.com/watch?v=KIYMy7vLLRo
I know how to slide a text along canvas, and one idea I got is having two canvases on top of each other, and top canvas is smaller and contains the text that is initially out of canvas and slides in. But if there is a way to do it with just one canvas that would be great.
You can using a clipping path to mask out part of the text.
Save the existing clipping path using the save() method. Create a shape/path and make it the new clipping path using the clip() method. Draw your text. Store the previous clipping path using the restore() method.
For example, suppose your canvas is 100 pixels by 100 pixels. The following will draw text on only the left side of the canvas.
context.save();
context.rect(0, 0, 50, 100);
context.clip();
context.fillText("Draw some text.", 30, 50);
context.restore();
jsFiddle : https://jsfiddle.net/CanvasCode/vgpov2yk/3
var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");
// Positions for the text startint off
var xText = -100;
var yText = 150;
// This will update the canvas as fast as possible (not good)
setInterval(function () {
// Clear the canvas
ctx.fillStyle = "#F0F";
ctx.fillRect(0, 0, c.width, c.height);
ctx.save()
// We create a clip rect
ctx.rect(200,0,400,400);
ctx.clip();
// Draw text
ctx.fillStyle = "#FFF";
ctx.font = "30px Arial";
ctx.fillText("Hello World", xText, yText);
ctx.restore();
// Increase the text x position
if (xText < 200) {
xText += 0.5;
}
}, 15);
All you have to do is use a clip rect which is like a mask in image editing.
I'm drawing many things on my context. Shapes, texts, images..
I want to use achieve the same effect i'm getting using the clip method on the context with globalCompositeOperation (Using the clip is harder for me to perform and i don't know if possible for texts)
The user can draw few shapes. and then start a mask phase. to draw some more shapes, texts.. which would draw into the mask and then the next draw will be clipped in the masked phase. and then continue to regular drawing...
For ex.
The user draw this drawing
Then started masked mode and drew this 2 red lines
Then he stopped drawing into the mask, and start drawing rectangle to consider the mask
And finally applied the mask clipping and the result should look like this
I've managed to clip the rectangle with the lines if there were no earlier drawings.
// Starting the mask phase
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(240, 140);
ctx.moveTo(80, 20);
ctx.lineTo(300, 140);
ctx.stroke();
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = 'cyan';
ctx.fillRect(50, 70, 250, 20);
// Setting the composition back
ctx.globalCompositeOperation = 'source-over';
but when i'm adding my drawings in the beginning of the code, the composition considering it as well.
ctx.fillStyle = 'brown';
ctx.beginPath();
ctx.arc(80, 80, 50, 50, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = 'yellow';
ctx.fillRect(80, 60, 150, 40);
ctx.fillStyle = 'black';
ctx.font = '40pt arial';
ctx.fillText('Hello', 130, 110);
// How to tell the context to start from here the compisition ???
How to tell the context to start composition from a certain point, if possible ?
I could create another canvas and draw the mask there.. and then draw the new canvas on the main canvas. But there is better solution ?
You can change the compositing mode at any point in the drawing flow by changing .globalCompositeOperation. But, as you've discovered, any new compositing mode will also affect existing canvas content.
Your intuition is correct about using a second "staging canvas" to do compositing that won't destroy your existing content.
You can use an in-memory canvas to do compositing and create your rect-with-erased-lines. Then you can drawImage this in-memory canvas to your main canvas. Since the compositing was done on your in-memory canvas, your existing circle-hello content is not undesirably affected by compositing.
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// create an in-memory canvas to do compositing
var c=document.createElement('canvas');
var cctx=c.getContext('2d');
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp6a.png";
function start(){
ctx.drawImage(img,0,0);
addCompositedRectangle();
ctx.drawImage(c,0,0);
}
function addCompositedRectangle(){
// resize the in-memory canvas
// Note: this automatically clears any previous content
// and also resets any previous compositing modes
c.width=300; // largest width;
c.height=140; // largest height;
// Starting the mask phase
cctx.strokeStyle = 'red';
cctx.lineWidth = 5;
cctx.beginPath();
cctx.moveTo(20, 20);
cctx.lineTo(240, 140);
cctx.moveTo(80, 20);
cctx.lineTo(300, 140);
cctx.stroke();
cctx.globalCompositeOperation = 'source-out';
cctx.fillStyle = 'cyan';
cctx.fillRect(50, 70, 250, 20);
// Setting the composition back
cctx.globalCompositeOperation = 'source-over';
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
Then i use big canvas images and createPattern for strokestyle i have lags.
Have two styles: pencil and eraser (eraser is style createrPattern from other canvas)
Demo: http://jsfiddle.net/y059fujd/
This is code place then i create pattern of style:
$("#eraser").click(function() {
ctx.lineWidth = 5;
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = ctx.createPattern(canvasBig, 'no-repeat');
});
There are in fact several issues in your code :
- canvasBig is too big, which slows down and may even break on some browser/devices.
- You are creating a pattern on each button click : Be aware that creating a pattern requires to copy the content since it might change afterwise. So there's heavy useless work ongoing here.
- The various image/canvas size didn't match, so the erasing could not work.
- I don't get why you need 3 canvas for a draw area + a backup, but i guess you'll use later the big canvas for some other thing. Best is to already make draw/erase work fine before this new feature.
All this is fixed here :
http://jsfiddle.net/y059fujd/4/
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height);
ctxBackup.drawImage(img, 0, 0, 700, 500);
imgPattern = ctx.createPattern(img, "no-repeat");
};
//
$("#eraser").click(function () {
ctx.lineWidth = 5;
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = imgPattern;
});
I have this code that for some reason it should draw canvas many times (using setTimeout):
function drawImage() {
var img = new Image();
var canvas = document.getElementById("event");
var context = canvas.getContext("2d");
img.src = "../img/event.png";
img.onload = function () {
context.drawImage(img, 0, 0);
}
setTimeout(drawImage, 3000);
}
but it cause dark edge as draw more times as this:
Is it possible to prevent edges become dark in repetitively drawing?
As long as the image has an alpha-channel you cannot avoid this when re-painting it over and over without some mechanism to reset the alpha values drawn.
The reason for this is that the alpha-value for that pixel will accumulate so when you draw a non-opaque edge (or anti-aliased edge) on top of each other the value for the alpha channel will be added to the value already drawn resulting in that the edge will be more and more visible.
There are fortunately a couple of ways to avoid this:
A) If you want to keep the alpha-channel in the image use clearRect before drawing the image.
context.clearRect(0, 0, img.width, img.height);
context.drawImage(img, 0, 0);
This will clear the canvas and the alpha channel.
ONLINE DEMO
B) If alpha channel is not important save out the image without any alpha-channel (use PNG with transparency off or use JPEG).
Also a note to your loop in the example - this is not a good way to redraw an image as you are initiating a load/cache check as well as image decoding each time.
You can modify your code as this (adopt as you please):
var canvas = document.getElementById("event");
var context = canvas.getContext("2d");
var img = document.createElement('img'); // due to chrome bug
img.onload = drawImage; // set onload first
img.src = "../img/event.png"; // src last..
function drawImage() {
context.clearRect(0, 0, img.width, img.height);
context.drawImage(img, 0, 0);
setTimeout(drawImage, 3000);
}
I'm trying to draw on a virtual canvas of proportions 1x1 so that I don't have to constantly multiply out the actual dimensions.
This works perfectly when I draw circles, but it would appear as though it does not work well with rectangles, and I'm not sure why.
When I have the following code:
var canvas = this.canvas;
var ctx = canvas.getContext("2d");
ctx.scale(this.canvas.width, this.canvas.height);
ctx.beginPath();
ctx.arc(.5, .5, .1, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
It works fine, and the circle scales with the canvas.
However, when I merely change it to the following:
var canvas = this.canvas;
var ctx = canvas.getContext("2d");
ctx.scale(this.canvas.width, this.canvas.height);
ctx.fillStyle = "blue";
ctx.fillRect(0,0, .0001, .001);
ctx.beginPath();
ctx.arc(.5, .5, .1, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
the rectangle takes up the entirety of the screen and even covers up the circle, even though the circle is drawn after the rectangle. It should, obviously, be taking up a very minute amount of space on the canvas.
It might be worth noting that this occurs in a game loop.
However, the following works as expected, with a red circle appearing above a blue backdrop
var canvas = this.canvas;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0, 50, 50);
ctx.beginPath();
ctx.arc(10, 10, 20, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
If you're calling this repeatedly in a game loop, the scale method will increase the scale of your transform, every time through the loop. So you end up with everything growing. Since you're not showing your actual code, it's hard to tell why the circle isn't affected.
Try calling scale() only once, or use save() and restore(), or just reset the transform at the start of the loop, before calling scale():
ctx.setTransform(1, 0, 0, 1, 0, 0);