This is a question about fabric.js. I have been trying to create some shapes on the contextTop. When you create some shapes on contextTop(not using add), how to merge them with the fabric.js canvas?
let canvas = new fabric.Canvas('C');
canvas.contextTop.StrokeRect(12,12,30,30);
Then, I want to make the Rect appear on the canvas. What should I do? Could anybody tell me how to use canvas API in fabric.js?
I do not understand contextTop, contextContainer...
You can't use canvas API directly.
FabricJS is a framework to work on the canvas and you have to use the framework rules, or it will break.
ContextTop is the result of getContext('2d') from the upperCanvas, where the upperCanvas is a canvas layered on top of the main one to do some quick drawing that does not require full canvas refresh.
All the html5 canvas drawing that are done outside the provided API will be wiped at the next frame.
To draw a rect you have to create the rect class and add it to the canvas, that is the correct way to do it:
var rect = new fabric.Rect({ width: 200, height: 300 });
canvas.add(rect);
Related
I'm using Paper.js to draw lines on canvas.
I want to be able to upload local image to the paperjs canvas and then be able to draw on top of it.
What I did is:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function make_base()
{
var img = document.createElement("img");
img.src = "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg";
context.drawImage(img, 100, 100);
}
document.getElementById('imageUpload').addEventListener('click', function(){
make_base();
});
This successfully adds an image to my canvas, but when I draw on canvas, image disappears and the image is on top of the lines, should be behind them.
You can add the image to the paper project as a paperjs Raster item, as such
var raster = new Raster({
source: "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg",
position: view.center
});
It will be inserted into the project in the current layer. You can then use paperjs functions like sendToBack and bringToFront to manipulate what appears where. I would probably put the raster image on the first Layer then add a new Layer for the drawing to make it easy to keep track of.
If you don't need to change or working with the image, use background-image on canvas tag:
<canvas id="canvas"
style="background-image: url(http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg);"></canvas>
I am working on Censiumjs, which is a javascript map library. I want to make a heatmap from json data and render it on the map.
Currently my idea is to draw a heatmap on a hidden canvas using a heatmap javascript plugin, then save the canvas as an image file, and finally render the image on the map.
However I found that I cannot draw on a hidden canvas. So I am wondering how I can draw an image underground and save it while loading the map?
Thanks for your help!
You can use offscreen rendering
function main(){
// here we create an OFFSCREEN canvas
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 300px;
offscreenCanvas.height = 300px;
var context = offscreenCanvas.getContext('2d');
// draw something into the OFFSCREEN context
context.fillRect(10,10,290,290);
// ...
}
I'd like to know if there is some way in Kinetic to have an image merged with another image on a lower layer, creating a kind of crop effect based on the shape of the "cropping" image.
The image must have a transparent background as a result, which is the main source of difficulty for me. I would otherwise just have used a mask with dragging turned off... I've made a diagram to explain what I want a bit better. Any suggestions welcome.
diagram
I've also made a quick jsfiddle, where I would like the contents of the image to be displayed inside the box. I feel like one layer is the way to go on this one.
You can use an offscreen Canvas element plus compositing to create your clipped image for use by your Kinetic.Image. Note that the offscreen canvas can be used as an image source for your Kinetic.Image.
Example code and a Demo: http://jsfiddle.net/m1erickson/ks1xxqfL/
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
canvas.width=background.width;
canvas.height=background.height;
ctx.drawImage(mask,0,0,mask.width*2.25,mask.height*2.25);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(background,0,0);
var support=new Kinetic.Image({
draggable:true,
image:canvas,
});
layer.add(support);
layer.draw();
Illustrations
Left: the background image,
Center: the image to be used as a clipping mask
Right: the background clipped by the mask (mask was scaled by 2.25X)
I have a canvas that I'm creating with KineticJS and I am adding transparent PNG images to that canvas. When stacked on top of each other, this makes one image of an outfit with all the different parts.
What I then want to do is allow the user to click on a pattern and then change a specific piece of that outfit with that pattern. So I need to fill in the non-transparent parts of one of the images with that pattern. I found a way to do this that didn't use KineticJS and it looks something like this:
ctx.globalCompositeOperation = 'source-in';
var ptrn = ctx.createPattern(fabricA, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 375, 260);
My question is, is there a way to do the same steps outlined above with KineticJS?
Also, I did first try to just do this without using KineticJS, but when I applied the above code to the layer, it filled in all of the images because they were all on the same layer. So I'm guessing that I will need to change my code to either use multiple layers or to add the images to groups in a single layer. Is my thinking right here? And which would be the better option for what I'm trying to accomplish? Multiple Layers? Or Multiple Groups on a single Layer?
Thanks for any help that anyone can provide.
If you want to do custom drawing then use the KineticJS Shape Object
This is a KineticJS object that lets you control exactly how it's drawn.
You create your overlays using your compositing method. Then put that drawing code in a function and give that function to Kinetic Shape's drawFunc.
Here's a skeleton of Kinetic.Shape:
var outfit1 = new Kinetic.Shape({
drawFunc: function(canvas) {
// you are passed a canvas to draw your custom shape on
// so new-up a context and get drawing!
var context = canvas.getContext();
context.beginPath();
// Draw stuff--including your composited overlays
// You can use any canvas.context drawing commands
},
id:"myCustomOutfit"
});
You can get started with an example here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
Is there a way to use an image as a clipping mask instead of creating a shape like this:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
I have tried to context.drawImage('myimg.png') on top of the context and clip but that did not work.
You can only directly clip using a path.
If you have an image that you wish to clip by, you can probably achieve this by drawing your content in another canvas, and then using globalCompositeOperation combined with drawImage (with the mask) to remove the bits you don't want.
You would then then use .drawImage again (possibly with a different globalCompositeOperation) to merge that clipped image with your original content.
See for example http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/