Can anyone help me look at this, I'm trying to draw lines on a canvas and it works in Edge, but in Firefox and Chrome the canvas goes black with a little frowny face in the top left corner. Code:
var cellwitdh = StaticData.SelectedTileSheet.getCellWidth();
var col = Math.floor(_gridCVS.width / cellwitdh);
var ctx = this._gridCVS.getContext2d();
for (i in 0...col)
{
ctx.beginPath();
ctx.moveTo(i cellwitdh, 0);
ctx.lineTo(i cellwitdh, this._gridCVS.width);
ctx.stroke();
ctx.closePath();
}
I don't get any error messages, just this image
The canvas was too big, I was trying to do a canvas size 24000x24000;
answer reference
In Three.js there is a GridHelper that allows you to create a plane grid easily, just like this:
var grid = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid);
You can see a result example here.
What I want to do is to create a box/cube grid, exactly like this:
I need to have a cube, because later I'll want to know, for example, if an object it's inside the cube (dynamically).
I wasn't able to find a helper that do what I need, so my idea is to take the GridHelper source code and use a BoxBufferGeometry instead of a BufferGeometry, but I don't even know if that's possible. I want to add that I do not have much knowledge in the field of 3D graphics, I'm just starting.
I'd love to hear you thoughts about this: I'm going in the right direction? How would you approach this problem?
I've finally used the approach that #WestLangley proposed:
var createBoxGrid = function (base, height, translateY, divisions, color) {
boxGrid = new THREE.Group();
boxGrid.name = "BoxGrid";
var box3 = new THREE.Box3(new THREE.Vector3(-base / 2, 0, -base / 2), new THREE.Vector3(base / 2, height, base / 2));
var box3Helper = new THREE.Box3Helper(box3, color);
var gridHelper = new THREE.GridHelper(base, divisions, color, color);
boxGrid.add(box3Helper);
boxGrid.add(gridHelper);
boxGrid.translateY(translateY);
return boxGrid;
};
For making Photo Collage Maker, I use fabric js which has an object-based clipping feature. This feature is great but the image inside that clipping region cannot be scaled, moved or rotated. I want a fixed position clipping region and the image can be positioned inside the fixed clipping area as the user want.
I googled and find very near solution.
var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,150,150);
ctx.rect(180,10,200,200);
ctx.closePath();
ctx.stroke();
ctx.clip();
Multiple Clipping Areas on fabric js canvas
where the image of one clipping region has appeared in another clipping region. How can I avoid this or is there another way of accomplishing this using fabric js.
This can be accomplished with Fabric using the clipTo property, but you have to 'reverse' the transformations (scale and rotation), in the clipTo function.
When you use the clipTo property in Fabric, the scaling and rotation are applied after the clipping, which means that the clipping is scaled and rotated with the image. You have to counter this by applying the exact reverse of the transformations in the clipTo property function.
My solution involves having a Fabric.Rect serve as the 'placeholder' for the clip region (this has advantages because you can use Fabric to move the object around and thus the clip region.
Please note that my solution uses the Lo-Dash utility library, particularly for _.bind() (see code for context).
Example Fiddle
Breakdown
1. Initialize Fabric
First, we want our canvas, of course:
var canvas = new fabric.Canvas('c');
2. Clip Region
var clipRect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: 'none',
stroke: 'black',
strokeWidth: 2,
selectable: false
});
We give these Rect objects a name property, clipFor, so the clipTo functions can find the one by which they want to be clipped:
clipRect1.set({
clipFor: 'pug'
});
canvas.add(clipRect1);
There doesn't have to be an actual object for the clip region, but it makes it easier to manage, as you're able to move it around using Fabric.
3. Clipping Function
We define the function which will be used by the images' clipTo properties separately to avoid code duplication:
Since the angle property of the Image object is stored in degrees, we'll use this to convert it to radians.
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
findByClipName() is a convenience function, which is using Lo-Dash, to find the with the clipFor property for the Image object to be clipped (for example, in the image below, name will be 'pug'):
function findByClipName(name) {
return _(canvas.getObjects()).where({
clipFor: name
}).first()
}
And this is the part that does the work:
var clipByName = function (ctx) {
var clipRect = findByClipName(this.clipName);
var scaleXTo1 = (1 / this.scaleX);
var scaleYTo1 = (1 / this.scaleY);
ctx.save();
ctx.translate(0,0);
ctx.rotate(degToRad(this.angle * -1));
ctx.scale(scaleXTo1, scaleYTo1);
ctx.beginPath();
ctx.rect(
clipRect.left - this.left,
clipRect.top - this.top,
clipRect.width,
clipRect.height
);
ctx.closePath();
ctx.restore();
}
NOTE: See below for an explanation of the use of this in the function above.
4. fabric.Image object using clipByName()
Finally, the image can be instantiated and made to use the clipByName function like this:
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
angle: 45,
width: 500,
height: 500,
left: 230,
top: 170,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
return _.bind(clipByName, pug)(ctx)
}
});
canvas.add(pug);
};
pugImg.src = 'https://fabricjs.com/lib/pug.jpg';
What does _.bind() do?
Note that the reference is wrapped in the _.bind() function.
I'm using _.bind() for the following two reasons:
We need to pass a reference Image object to clipByName()
The clipTo property is passed the canvas context, not the object.
Basically, _.bind() lets you create a version of the function that uses the object you specify as the this context.
Sources
https://lodash.com/docs#bind
https://fabricjs.com/docs/fabric.Object.html#clipTo
https://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/
I have tweaked the solution by #natchiketa as the positioning of the clip region was not positioning correctly and was all wonky upon rotation. But all seems to be good now. Check out this modified fiddle:
https://jsfiddle.net/PromInc/ZxYCP/
The only real changes were made in the clibByName function of step 3 of the code provided by #natchiketa. This is the updated function:
var clipByName = function (ctx) {
this.setCoords();
var clipRect = findByClipName(this.clipName);
var scaleXTo1 = (1 / this.scaleX);
var scaleYTo1 = (1 / this.scaleY);
ctx.save();
var ctxLeft = -( this.width / 2 ) + clipRect.strokeWidth;
var ctxTop = -( this.height / 2 ) + clipRect.strokeWidth;
var ctxWidth = clipRect.width - clipRect.strokeWidth + 1;
var ctxHeight = clipRect.height - clipRect.strokeWidth + 1;
ctx.translate( ctxLeft, ctxTop );
ctx.rotate(degToRad(this.angle * -1));
ctx.scale(scaleXTo1, scaleYTo1);
ctx.beginPath();
ctx.rect(
clipRect.left - this.oCoords.tl.x,
clipRect.top - this.oCoords.tl.y,
ctxWidth,
ctxHeight
);
ctx.closePath();
ctx.restore();
}
Two minor catches I found:
Adding a stroke to the clipping object seems to throw things off by a few pixels. I tried to compensate for the positioning, but then upon rotation, it would add 2 pixels to the bottom and right sides. So, I've opted to just remove it completely.
Once in a while when you rotate the image, it will end up with a 1px spacing on random sides in the clipping.
Update to #Promlnc answer.
You need to replace the order of context transformations in order to perform proper clipping.
translation
scaling
rotation
Otherwise, you will get wrongly clipped object - when you scale without keeping aspect ratio (changing only one dimension).
Code (69-72):
ctx.translate( ctxLeft, ctxTop );
ctx.rotate(degToRad(this.angle * -1));
ctx.scale(scaleXTo1, scaleYTo1);
Replace to:
ctx.translate( ctxLeft, ctxTop );
ctx.scale(scaleXTo1, scaleYTo1);
ctx.rotate(degToRad(this.angle * -1));
See this:
https://jsfiddle.net/ZxYCP/185/
Proper result:
UPDATE 1:
I have developed a feature to clip by polygon:
https://jsfiddle.net/ZxYCP/198/
This can be done much more easily. Fabric provides render method to clip by the context of another object.
Checkout this fiddle. I saw this on a comment here.
obj.clipTo = function(ctx) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clippingRect.render(ctx);
ctx.restore();
};
As I tested all fiddles above they have one bug. It is when you will flip X and Y values together, clipping boundaries will be wrong. Also, in order not doing all calculations for placing images into the right position, you need to specify originX='center' and originY='center' for them.
Here is a clipping function update to original code from #natchiketa
var clipByName = function (ctx) {
var clipRect = findByClipName(this.clipName);
var scaleXTo1 = (1 / this.scaleX);
var scaleYTo1 = (1 / this.scaleY);
ctx.save();
ctx.translate(0,0);
//logic for correct scaling
if (this.getFlipY() && !this.getFlipX()){
ctx.scale(scaleXTo1, -scaleYTo1);
} else if (this.getFlipX() && !this.getFlipY()){
ctx.scale(-scaleXTo1, scaleYTo1);
} else if (this.getFlipX() && this.getFlipY()){
ctx.scale(-scaleXTo1, -scaleYTo1);
} else {
ctx.scale(scaleXTo1, scaleYTo1);
}
//IMPORTANT!!! do rotation after scaling
ctx.rotate(degToRad(this.angle * -1));
ctx.beginPath();
ctx.rect(
clipRect.left - this.left,
clipRect.top - this.top,
clipRect.width,
clipRect.height
);
ctx.closePath();
ctx.restore();
}
Please check the updated fiddle
With the latest update on fabric 1.6.0-rc.1, you are able to skew the image by hold shift and drag the middle axis.
I have trouble with how to reverse the skew so that the clipping area stays the same. I have tried the following code to try to reverse it back, but didn't work.
var skewXReverse = - this.skewX;
var skewYReverse = - this.skewY;
ctx.translate( ctxLeft, ctxTop );
ctx.scale(scaleXTo1, scaleYTo1);
ctx.transform(1, skewXReverse, skewYReverse, 1, 0, 0);
ctx.rotate(degToRad(this.angle * -1));
Demo: https://jsfiddle.net/uimos/bntepzLL/5/
Update to previous guys answers.
ctx.rect(
clipRect.oCoords.tl.x - this.oCoords.tl.x - clipRect.strokeWidth,
clipRect.oCoords.tl.y - this.oCoords.tl.y - clipRect.strokeWidth,
clipRect.oCoords.tr.x - clipRect.oCoords.tl.x,
clipRect.oCoords.bl.y - clipRect.oCoords.tl.y
);
Now we are able to scale the clipping area without a doubt.
I want to create an SVG animation, yet render it to Canvas. I know about CanVG, but I'm not certain it does what I need: Displaying SVG elements animated using javascript within a Canvas div, rather than a 'native' SVG window. When I look at CanVG example code, it seems to point to an SVG file, rather than utilizing SVG code that is part of the same file, & being manipulated in realtime by javascript. Any help?
I faced this issue me too some time ago and tried every possibilities mentioned above, unfortunately without results. After some research I found a method to inject SVG into Canvas, with a little pain and extra work it's possible. So the solution is to define svg elements then push it to an array then render that SVG as an image.
Here is a short code snippet:
SVG part:
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
"<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
"</div>" +
"</foreignObject>" +
"</svg>";
characters.push(data);
and JS part:
var letters = [...] // a pool of characters
var images = new Array(letters.length);
for (var i=0; i< letters.length; i++) {
var textPosition = WIDTH/2 - (letters.length * CHAR_DISTANCE)/2;
var txt = new Text(letters[i], textPosition + (i*CHAR_DISTANCE), HEIGHT/2,
(Math.random() * 3) + 5 , (-Math.random() * 10) + 5);
images[i] = new Image();
images[i].src = characters[i];
textArray.push(txt);
}
You may check the whole source code here: https://esimov.com/experiments/javascript/404/
There are several libraries (like CanVG) that merely turn SVG into Canvas drawing commands. They won't help you much with animation.
For animation you're going to have to do it on your own. You could attempt to use CanVG to draw the SVG onto the canvas as it is being animated, using a timer to update the canvas, but this is supremely messy and cannot be done unless the browser also supports SVG (and if it does, why would you want to do it?)
If you want to manipulate the SVG in real time you're going to have to stick with SVG proper. Otherwise you need to roll all your own state and interactivity on the canvas. No shortcuts there[1], sorry.
[1] Well, there are a few libraries for canvas object interaction that allow you to use SVG objects as their objects, such as fabric.js. But depending on what you want this may be nowhere near enough.
This is the first question I've ever asked on here, as normally I can find an answer that will solve all my problems. However, this week I've hit quite the wall.
I'm using a canvas on my page that's working great and can be saved as an image file. I've also created a button that will open the canvas in a new window for printing after using toDataURL. I'm using the code below:
function printable() {
var dataUrl = document.getElementById("mainCanvas").toDataURL("image/png");
var windowContent = '<!DOCTYPE html>';
windowContent += '<head><title>Print Map</title></head>';
windowContent += '<body>';
windowContent += '<img src = "' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('', '', width = 340, height = 260);
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
}
This works great and opens the print dialogue to print my canvas image. My issue is that my image is larger than a single page and only the first page of my image prints. Is there any way to print my canvas across multiple pages, or should i just chalk this up to bad browser to printer functionality and get my users who need to print to use a different program after saving their canvas locally?
Thanks
there is a stupid solution, but definitely work.
use a script to split canvas, and put contents to several separate canvases.
use these functions:
ImageData getImageData(in float x, in float y, in float width, in float height);
void putImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX Optional , in float dirtyY Optional , in float dirtyWidth Optional , in float dirtyHeight Optional );