I'm relatively new to JavaScript and to get a grip on it I've been working on a 3D engine and I stumbled on something odd.
When I render a filled mesh with wire-frame disabled, a gap shows up between my triangles.
Here's an example:
// vertices
var v1 = [40,20];
var v2 = [125,35];
var v3 = [165,105];
var v4 = [35,95];
// draw on screen 1
var canvas = document.getElementById("screen");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,true);
triangle(v3,v4,v1,context,true);
// draw on screen 2
var canvas = document.getElementById("screen2");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,false);
triangle(v3,v4,v1,context,false);
// draw triangle method
function triangle(v1,v2,v3, context,wireframe)
{
context.beginPath();
context.moveTo(v1[0],v1[1]);
context.lineTo(v2[0],v2[1]);
context.lineTo(v3[0],v3[1]);
context.lineTo(v1[0],v1[1]);
context.closePath();
context.fillStyle = "#333";
context.fill();
if (wireframe)
{
context.strokeStyle = "#0f3";
context.stroke();
}
}
body
{
background-color: #ddd;
}
canvas
{
border:2px solid #000;
}
<canvas id="screen" width="200" height="150" ></canvas>
<canvas id="screen2" width="200" height="150"></canvas>
In essence, the two polygons don't seem to connect properly.
Making the wire-frame the same colour as triangle is not a solution. I want to apply a texture without seeing the edge.
Drawing connected polygons isn't a solution, each triangle may have its own texture transformation.
Should I overdraw triangles to close the gaps?
Is this an Anti-Aliasing issue?
Thanks in advance.
Above: Shows gap between triangles when the wire-frame has been disabled
UPDATE 9-apr-2017
I've considered various options to solve my issue, including writing a triangle routine. Picture down below. However, drawing two triangles tanks my FPS quite a lot. I need a faster way to put pixels on the canvas, but that's for another post since it's off topic.
However, I think that expanding the triangle half a pixel is a better/faster solution since the fill() method is executed by the browser internally instead of JavaScript.
One solution would be to inflate the triangles by a little bit to fill the gaps. This code inflates by 1%.
I think more ideal would be code that inflates by 0.5 pixels, however, that code would be a little more expensive as it would involve calculating vector lenghts...
// vertices
var v1 = [80,40];
var v2 = [250,70];
var v3 = [230,210];
var v4 = [70,190];
// draw on screen 1
var canvas = document.getElementById("screen");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,true);
triangle(v3,v4,v1,context,true);
// draw on screen 2
var canvas = document.getElementById("screen2");
var context = canvas.getContext("2d");
inflateTriangle(v1,v2,v3,context,false);
inflateTriangle(v3,v4,v1,context,false);
// draw triangle method
function inflateTriangle(v1,v2,v3, context,wireframe)
{
//centre of tri
xc=(v1[0]+v2[0]+v3[0])/3;
yc=(v1[1]+v2[1]+v3[1])/3;
//inflate tri by 1%
x1= xc+(v1[0]-xc)*1.01;
x2= xc+(v2[0]-xc)*1.01;
x3= xc+(v3[0]-xc)*1.01;
y1= yc+(v1[1]-yc)*1.01;
y2= yc+(v2[1]-yc)*1.01;
y3= yc+(v3[1]-yc)*1.01;
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.closePath();
context.fillStyle = "#333";
context.fill();
if (wireframe)
{
context.strokeStyle = "#0f3";
context.stroke();
}
}
<body>
<canvas id="screen" width="400" height="300" style="border:2px solid #000;"></canvas>
<canvas id="screen2" width="400" height="300" style="border:2px solid #000;"></canvas>
</body>
Related
I have a canvas draw that has curves and I want to know the size of it like one of the examples of this library.
https://github.com/Pomax/bezierjs
Example: Size of a curve
How can I combine your example with my canvas draw?
This is my javascript code:
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
c_size = 650;
ctx.canvas.width = c_size;
ctx.canvas.height = c_size;
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(535,105);
ctx.quadraticCurveTo(585,44,620,115);
ctx.quadraticCurveTo(628,155,643,155);
ctx.quadraticCurveTo(628,195,643,360);
ctx.lineTo(550,368);
ctx.lineTo(538,302);
ctx.lineTo(552,285);
ctx.quadraticCurveTo(528,195,535,105);
ctx.stroke();
</script>
<canvas id='canvas' width='650' height='650' style="border: 1px solid #000">
Canvas not supported
</canvas>
I am pretty sure I give you the API over on the actual page for this library. Like any browser library, include it on your page (this should not need explicit instructions), and then just invoke the library as indicated: create an instance, and then call the api functions described in the online documentation.
Also note that in HTML5, you don't indicate the script type unless it's not JavaScript. So:
<!doctype html>
<html>
...
<script src="bezier.js"></script>
...
<canvas id="mycanvas"></canvas>
...
<script src="yourscript.js">?</script>
...
</html>
And then in your own file:
const cvs = document.getElementById("mycanvas");
const size = 650;
cvs.width = size;
cvs.height = size;
let ctx = cvs.getContext("2d");
// now do things. Like this:
const curve = new Bezier(/* some coordinates here */);
const p = curve.points,
p1 = p[0],
p2 = p[1],
p3 = p[2],
p4 = p[3];
// draw the curve
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.curveTo(p2.x,p2.y, p3.x,p3.y, p4.x,p4.y);
ctx.stroke();
// what do we know about the curve?
let len = curve.length();
let bbox = JSON.stringify(curve.bbox());
let msg = `The curve has length ${len} and bounds ${bbox}`;
document.getElementById('infopanel').textContent = msg;
Note that Bezier.js is not itself a drawing library, it is a maths library for working with Bezier curves. Canvas has quadratic and cubic curve drawing built in (as does the SVG pathing instruction set). Bezierjs is a support library for "getting information about your curves" like their arc length, LUT of on-curve points, intersection computation, etc.
I tried to create an HTML canvas, place a rectangle... then INSIDE THAT rectangle, draw various shapes and an RGBa PNG... all of them clipped inside the dimensions of the rectangle. Then I tried to change the color of the PNG when you press an HTML button input. (Further comments in code.)
Heres the problems... A. You have to draw to a temporary canvas and apply "GlobalCompositeOperation source-atop" just AFTER the clipping rectangle. Everything drawn after that is successfully clipped into the rect shape. Then the whole thing is copied (drawn) to a MAIN canvas. I was told to do it this way in order for the programming to recognize MULTIPLE elements after a "composite" operation. I have to say this works BEAUTIFULLY!! but here's problem B...
To to a "getData" on an image (to change color), I think you have to place the image on a canvas, and doing all the image pixel manipulation screws up the "composite" operation, so I tried to draw the PNG to a THIRD canvas, do the pixel changes, and then draw it to the temporary canvas... adding it to the rest of the elements....THEEENNN draw it all to the main canvas. Does not work. See code. Please help, Im mad enough to chew neutronium.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="theCanvas" width="200" height="200" style="border:2px solid #000000;"></canvas>
<canvas id="tempCanvas" width="200" height="200" style="display:none;"></canvas>
<canvas id="anotherCanvas" width="200" height="200" style="display:none;"></canvas>
<form>
<input type="button" id="changeColor" value="Click to Change Color of Graphic">
</form>
<script type="text/javascript" src="hereWeGoAgain_GHELP.js"></script>
</body>
</html>
//------------------------------------- JS
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasApp() {
var canvas = document.getElementById('theCanvas');// the main canvas, where it all goes in the end
var context = canvas.getContext('2d');
var tempCanvas = document.getElementById('tempCanvas');// the canvas to do my "source-atop" stuff...
var tempContext = tempCanvas.getContext('2d');
var anotherCanvas = document.getElementById('anotherCanvas');
var anotherContext = anotherCanvas.getContext('2d');
// ...and Im thinking I should draw the RGBA PNG here, before placing it in the temp canvas, with the other elements
var cc = document.getElementById('changeColor');
cc.addEventListener('click', function(){changeColorFunction('ff0000');}, false);
// the HTML form button to change the PNG color
var colorOfThePlacedPNG = "#000000";
var imagesToLoad = 0;
var imagesLoaded = 0;
function drawScreen() {
tempContext.fillStyle="#999999";
tempContext.fillRect(0,0,200,200); //color the whole temp canvas area grey....
tempContext.fillStyle="#2baae1";
tempContext.fillRect(30,30,140,140);//now draw a light blue rect inside....
tempContext.globalCompositeOperation="source-atop"; // now make everything drawn AFTERWARDS be clipped (masked) inside the blue rect
// when I comment out the above "global Comp Op"... everything draws to the main canvas normally...just not clipped(masked) however
tempContext.fillStyle="#f47e1f";
tempContext.fillRect(150,100,150,150);//SO heres an orange box intentionally clipped off the bottom right in the blue rect
tempContext.fillStyle="#d89bc5";
tempContext.fillRect(40,50,80,200);//AND heres a light purple rect intentionally clipped at the bottom of the blue rect
getTheImageData(); //draw PNG to another canvas, convert image data, put in tempContext
//tempContext.restore();//dont know if I need this
context.drawImage(tempCanvas, 0, 0);// and then FINALLY draw all to the main canvas
}
var loaded = function(){
imagesLoaded += 1;
if(imagesLoaded === imagesToLoad){
drawScreen();
}
}
var loadImage = function(url){
var image = new Image();
image.addEventListener("load",loaded);
imagesToLoad += 1;
image.src = url;
return image;
}
function changeColorFunction(e) {
colorOfThePlacedPNG = e;
drawScreen();
}
function getTheImageData(){
anotherContext.drawImage(testPNGimage, 0, 0);// draw to the third canvas(another canvas)
var imgData = anotherContext.getImageData(0, 0, 200, 200);
// how do i color it red? ....like #ff0000 ???
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
tempContext.putImageData(imgData, 0, 0);
}
var testPNGimage = loadImage("test.png");// the PNG is just a 75X75px black squiggle drawn in pshop
}
You're overcomplicating things!
There is a clipping method built into canvas.
Use clipping instead of compositing and multiple canvases.
Do this and all new drawings will be clipped inside your 140x140 rect:
context.beginPath();
context.rect(30,30,140,140);
context.clip();
Here's a simplified redesign of your code:
Draw a grey rect filling the canvas.
Draw a blue 140x140 rect at [30,30].
Clip all new drawings into the blue rect with context.clip()
Draw a clipped orange rect.
Draw a clipped purple rect.
Unclip so new drawings will be visible anywhere on the canvas.
Draw the squiggle image (it's not clipped).
Use .getImageData to invert every pixel's color.
And a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/squiggle.png";
function start(){
//color the whole canvas area grey....
ctx.fillStyle="#999999";
ctx.fillRect(0,0,200,200);
//now draw a light blue rect inside....
ctx.fillStyle="#2baae1";
ctx.beginPath();
ctx.rect(30,30,140,140);
ctx.fill();
// save the unclipped context state
ctx.save();
// cause all new drawings to be clipped inside
// the blue 140x140 rect at [30,30]
ctx.clip();
//SO heres an orange box intentionally clipped off the bottom right in the blue rect
ctx.fillStyle="#f47e1f";
ctx.fillRect(150,100,150,150);
//AND heres a light purple rect intentionally clipped at the bottom of the blue rect
ctx.fillStyle="#d89bc5";
ctx.fillRect(40,50,80,200);
// restore the context state (releases clipping for new drawings)
ctx.restore();
// draw the squiggley line image -- it's not clipped in the blue rect
ctx.drawImage(img,0,0);
// invert the colors using getImageData
var imgData = ctx.getImageData(0, 0, 200, 200);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=200 height=200></canvas>
This program runs. But, as you can, see there is an artifact when the square turns over. The matrix values must be represented, and this representation should also bee seen depending on an angle. Is there any way to archieve good visualization. Why is this happening to my code?
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var x=100;
var y=100;
var width=200;
var height=200;
var radianAngle=0;
Rotar();
var array = new Array2D(200,200);
function Array2D(NumOfRows,NumOfCols)
{
var k=new Array(NumOfRows);
for (i = 0; i < k.length; ++i)
k[i] = new Array(NumOfCols);
return k;
}
function Rotar(){
//Borramos
ctx.clearRect(0,0,canvas.width,canvas.height);
//Salvamos el estado
ctx.save();
// Transladamos su centro de gravedad
ctx.translate(x+width/2,y+height/2);
//Otra mⳍ
ctx.rotate(radianAngle);
var array = new Array2D(200,200);
for(i=0; i<200; i++)
{
for(j=0;j<200; j++)
{
array[i][j]=i+j;
var r,g,b;
r = array[i][j];
g=50;
b=50;
//La parte de dibujo
ctx.fillStyle = "rgba("+r+","+g+","+b+",100)";
ctx.fillRect( i, j, 1, 1 );
}
}
ctx.restore();
}
$("#test").click(function(){
radianAngle+=Math.PI/60;
// call rotateSquare
Rotar();
});
body {
background: #dddddd;
}
#canvas {
background: #eeeeee;
border: thin solid #aaaaaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" height="500" width="500"></canvas>
<button id="test">Rotate</button><br>
Rotar();
});
This is a typical rounding issue : You rotate the context, then iterate on (x,y) in [0,199]. But while drawing the small one pixel wide rectangles, they won't fit perfectly one pixel, so the renderer has to 'diffuse' the color on several real device pixels, and that goes with a rounding error since r,g,b are only stored on 8 bits. Add to this the error on the coordinates of the tiny rectangles -that will be rasterized on up to 4 pixels-, and you have the grid you're seing.
When doing such transform, the rule is to rasterize : iterate the pixels of the destination and find where they originate in the source, not the other way around.
So a simple way do that : find the bounding box of the rotated rect, iterate in this BBox, and if a point is in the rect compute its color.
Or build an algorithm that rasterize the rect (most easy would be to use triangles, see here for an example of a triangle rasterization i played with : http://jsfiddle.net/gamealchemist/5cnkr2s5/ )
But... for what you are drawing here most simple and way faster is to build a linear gradient, use it as the fillStyle, and draw the whole rectangle in a single fillRect call. In other words : let the canvas (and, behind the scene, the GPU) do the math for you.
var grad = ctx.createLinearGradient(0,0,200,200);
grad.addColorStop(0,'#000');
grad.addColorStop(1,'#F00');
ctx.fillStyle = grad;
//
ctx.save();
ctx.clearRect( ... );
ctx.translate ( the upper left point) ;
ctx.rotate ( some angle );
ctx.fillRect(0, 0, 200, 200);
ctx.restore();
most simple example here (click 'run' several times, angle is randomized ):
http://jsfiddle.net/gamealchemist/j57msxr5/11/
(Rq : You can have an idea of the speed up of using the context2D by comparing the triangle rasterization i mentioned above with the same work done by the context2D : http://jsfiddle.net/gamealchemist/zch3gdrx/ )
There is a shadow on the bottom and right sides of a rectangle I've drawn in the canvas on the upper-left hand corner of my window here:
http://thomasshouler.com/datavis/gugg/ratio.html
I haven't set any positive values to the relevant context attributes (shadowBlur, shadowOffsetY, etc.), so what gives?
Canvas code snippet:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=0;
ctx.shadowOffsetY=0;
var width = 50;
var height = 4;
var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#CCCCCC');
grd.addColorStop(1,'#FF0000');
ctx.fillStyle=grd;
ctx.fillRect(0,0,width,height);
Any wisdom would be greatly appreciated.
It's related to scaling as the canvas is displayed. Your original fragment with a very small gradient and scaled up http://jsfiddle.net/CBzu4/ clearly shows the blurred outline.
Drawing larger (making sure there is no css scaling) it looks fine: http://jsfiddle.net/CBzu4/1/ and the code is the same as yours, just rearranged:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var width = 50 * 8;
var height = 4 * 8;
var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#FFFF00');
grd.addColorStop(1,'#FF0000');
ctx.fillStyle = grd;
ctx.fillRect(5,5,width,height);
Same code, but this time the canvas scaled up with the embedded style: http://jsfiddle.net/CBzu4/2/
<canvas id="myCanvas" style="border: 1px solid red; width: 120%; height: 120%;" width="600" height="80">
The final version is again the same as yours, no css scaling at all and no blurred outline: http://jsfiddle.net/CBzu4/3/
How do you draw with alpha = 0 to an HTML5 Canvas? Imagine I'm making a photoshop clone, I have a layer that's solid red. I pick the eraser tool and draw with. It draws in rgba(0,0,0,0) letting me see through to the background. How do I do this in HTML5 Canvas?
Here's some code.
var rand = function(v) {
return Math.random() * v;
};
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
// fill the canvas with black
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Erase some circles (draw them in 0,0,0,0);
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.globalCompositeOperation = "copy";
for (var ii = 0; ii < 5; ++ii) {
ctx.beginPath();
ctx.arc(rand(canvas.width), rand(canvas.height),
rand(50) + 20, 0, 360, false);
ctx.fill();
}
/*
source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
darker
copy
xor
*/
canvas {
margin: 10px;
border: 1px solid black;
background-color: yellow;
}
<div>Want red with yellow circles</div>
<canvas></canvas>
This doesn't work. All canvas operations are considered to be infinitely large which means drawing each circle (arc) with globalCompositeOperation set to "copy" effectively erases everything outside of each circle.
I might be able to setup clipping to match the circle but ideally I'd like to be able to erase with an anti-aliased circle, same as a photoshop brush.
You'll want to use:
ctx.fillStyle = "rgba(0,0,0,1)"; // (Drawing with 0 alpha pretty much means doing nothing)
ctx.globalCompositeOperation = "destination-out";
Working Example
Keep in mind to save the previous globalCompositeOperation and restore it, or transparency won't work properly, later on.
The problem is that "Drawing with alpha=0 on a canvas just overlays a invisible layer of "ink", by default.
If you have to erase fluently, so when the mouse was clicked and moved this line should be erased, this might be a solution:
var canvas = document.getElementById("myCanvas");
var eraseWidth = 5;
$("#myCanvas").mousedown(function(canvas){ //the mousedown (writing) handler, this handler does not draw, it detects if the mouse is down (see mousemove)
x = canvas.pageX-this.offsetLeft;
y = canvas.pageY-this.offsetTop;
});
$("#myCanvas").mousemove(function(canvas){
context.beginPath();
var x2 = x-(eraseWidth/2); //x2 is used to center the erased rectangle at the mouse point
var y2 = y-(eraseWidth/2); //y2 is used to center the erased rectangle at the mouse point
context.clearRect(x2, y2, eraseWidth, eraseWidth); //clear the rectangle at the mouse point (x2 and y2)
context.closePath();
};
basically what this does is clear a rectangle when the mouse is moved, everytime the mousehandler sends a mousemove event and uses the x and y coordinates for the center of the canvas to clear the recangle. the result is a cleared (erased) line.
ok, you can see the rectangles if you move too fast, but my project was a concept, so it did the trick for me ;)
If you're working on something akin to a photoshop clone, then it's probably best for you to create a canvas for each layer. I think that would greatly simplify everything for you, while giving you better performance in return.