I am creating a drawing app, and using this function to download the canvas image.
function download() {
var dt = canvas.toDataURL('image/png');
this.href = dt;
};
I want to set the canvas background to white before downloading because on mobile, the images are very distorted and black. Any ideas?
You may want to draw a white rectangle the size of the entire canvas, beneath the actual content of the canvas.
// get the canvas 2d context
var ctx = canvas.getContext('2d');
// set the ctx to draw beneath your current content
ctx.globalCompositeOperation = 'destination-over';
// set the fill color to white
ctx.fillStyle = 'white';
// apply fill starting from point (0,0) to point (canvas.width,canvas.height)
// these two points are the top left and the bottom right of the canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);
You have to apply these lines before generating your toDataUrl() stream.
Idea taken from: http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/
Related
Like the title said, i need to give my canvas area set a background and then i draw several in the area,but when i click the area, the image will lose. How can i solve it?
Here are my code
const background = new Image();
background.src = this.src;
background.onload = function() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
};
i can use it to create a image in canvas, but i can not draw on it,please help me fix the image in the canvas area or change to another way to set canvas's background
i'm receving from webserver part of image, let say 600px x 600px, which i'm drawing in canvas.
The real size of image is let say 600px x 1200px(height).
I need to create scrollbar over canvas. After i will drag scrollbar i will count, how many pixels i've moved scrollbar, send to server information and i will receive other portion of picture (600x600px) but scrolled.
The mechanism is done by me, but i need to draw scrollbar over canvas.
<b-card>
<div id="image">
<canvas
id="canvasId"
ref="canRef"
#mousedown="clickMe"
#mouseup="scrollOff"
#mousemove="scrollMe"
/>
</div>
</b-card>
How to draw scroll bar on the right side of canvas?
First, fetch the canvas element and its context
const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');
Then, draw the rectangle using the stroke() function
ctx.beginPath();
ctx.rect(0, 0, 150, 100); //change to the coordinates you want
ctx.stroke();
You can control the color and the width of the line using:
ctx.lineWidth = 10;
ctx.strokeStyle = '#ff0000';
I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. On a blank canvas I dram an image as shown in the figure below. Now I want to create a circle Shape which can be used to erase parts of the image. The red circle in the image is the eraser.
How can I erase parts of an Image on HTML5 Canvas?
You can use Compositing to "erase" pixels.
Specifically you use destination-out compositing.
KineticJS does not support compositing, but you still have a couple of options:
(Note: KineticJS has become KonvaJS and I haven't checked whether KonvaJs supports compositing. If it now does, just use destination-out compositing inside KonvaJS)
Option#1: Use a native canvas element as your Kinetic.Image source
Create an in-memory html5 canvas using var c=document.createElement,
Resize the canvas to image size,
drawImage your image onto the canvas,
Create a Kinetic.Image and set its image property to a reference to the native canvas. The Kinetic.Image will display whatever is drawn onto the native canvas.
var kImage=new Kinetic.Image({
...
image:c,
...
Set the canvas Compositing to cause new drawings to "erase" existing pixels:
c.globalCompositeOperation='destination-out';
Listen for drag events on your circle-eraser. Use those events to draw a circle on the canvas that move just like the Kinetic circle-eraser moves. Since the canvas's compositing is set to "erase", new drawings of the circle on the canvas will erase the image on the canvas.
Your Kinetic.Image exactly reflects its canvas source (var c), so your Kinetic.Image will also display the image being erased in response to the Kinetic circle-eraser movements.
Option#2: Use a Kinetic.Shape
You can do the same operation as Option#1 by creating a Kinetic.Shape on a separate layer and getting a reference to the native canvas context using:
var ctx = myShapeLayer.getContext()._context;
This is a weaker option because KineticJS will redraw the shape--causing your erasing to be undone. Therefore you must do the additional step of saving all your circle-eraser's movements and replaying those movements (in drawFunc) to redo your erasing.
Thanks for markE for his detailed answer,
I have tried to get the context from the Konva.Layer() and it worked.
var freeHandDrawingImage = new Image();
freeHandDrawingImage.onload = function() {
var context = freeHandDrawingLayer.getContext('2d');
context.drawImage(this, 0,0);
context.globalCompositeOperation='destination-out';
freeHandDrawingLayer.draw();
};
freeHandDrawingImage.src = "image.png";
and I have used the Konva.Shape to erase by "destination-out" and draw free draw by custom "source-over":
freeDrawingType = 'brush';
isFreeDrawingMode = false;
isPaint = false;
lastPointerPosition = {};
drawFreeDrawings = function(){
var freeDraw = new Konva.Shape({
name: "freeDraw",
stroke: 'black',
strokeWidth: 5,
closed : false,
sceneFunc: function(context){
// free draw quad
debugger;
if(isPaint){
if (freeDrawingType === 'brush') {
context.globalCompositeOperation = 'source-over';
}
if (freeDrawingType === 'eraser') {
context.globalCompositeOperation = 'destination-out';
}
context.beginPath();
context.moveTo(lastPointerPosition.x, lastPointerPosition.y);
var newPosition = stage.getPointerPosition();
context.lineTo(newPosition.x, newPosition.y);
context.stroke();
debugger;
lastPointerPosition = newPosition;
context.strokeShape(this);
}
}
});
freeHandDrawingLayer.add(freeDraw);
// now we need to bind some events
// we need to start drawing on mousedown
// and stop drawing on mouseup
selectionBoxBackground.on('mousedown', function() {
if(isFreeDrawingMode){
isPaint = true;
lastPointerPosition = stage.getPointerPosition();
stage.draw();
}
});
selectionBoxBackground.on('mouseup', function() {
if(isFreeDrawingMode){
isPaint = false;
}
});
// and core function - drawing
selectionBoxBackground.on('mousemove', function() {
if (!isPaint) {
return;
}
freeHandDrawingLayer.draw();
});
}
In plain JavaScript this is pretty straight forward.
First get your canvas and drawing context ready:
var context=document.getElementById("your_canvas_id").getContext("2d");
var image=document.getElementById("your_image_id");
Now you want to draw the image to the context:
context.drawImage(image,0,0,image.width,image.height,0,0,image.width,image.height);
Now, when you want to erase part of your image, just draw over the canvas:
var x=y=radius=10;// Circle coordinates and radius.
context.fillStyle="#ffffff";// Your eraser color (not transparent)
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2);
context.fill();
This only simulates erasing, however. If you want what you erase to be transparent afterwards, you might look into context.clearRect, but I'm not sure how you would do that with a circle.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pan");
img.setAttribute('crossOrigin','anonymous');
ctx.drawImage(img,10,10);
var img = document.getElementById("MyPix");
img.setAttribute('crossOrigin','anonymous');
ctx.drawImage(img,10,10);
As its context is 2d i cannot draw the image in canvas at any angle, webGl could be better solution but could not get any relevent example using webgl. Please help.
You can translate and rotate the context before drawing an image. To draw an image at a specific position, rotated by a specific angle, use this code:
ctx.save();
ctx.translate(10,10); // here the position for the image to be drawn
ctx.rotate(someAngle); // here your angle
ctx.drawImage(img,0,0);
ctx.restore();
Note, that the above code will rotate your image by the left upper corner of the image. To rotate it by it's center use:
ctx.drawImage(img,-img.width*0.5,-img.height*0.5);
instead.
Hey Everyone I am new to html5 canvas as I would like to know is there any possibility of getting the image height,width and angle values while resizing and rotating.The image which displays what i want.
I want that process after dropping in to canvas as i searched Google for this couldn't find relevant answer almost everyone is showing the positions of image in canvas that is to kept in code but i want the image should should display its values automatically by click on dimensions button.Thanks in advance any help would be great.
The image should display its dimensions in canvas according to image like if image is changed(or re-sized or rotate automatically the dimensions should change using button click function).
You can play with canvas in the following manner
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = '#0065BD';
ctx.fillRect(0, 0, 125, 75);
// Draw white X
ctx.beginPath();
ctx.lineWidth = "15";
ctx.strokeStyle = "white";
ctx.moveTo(0, 0);
ctx.lineTo(125, 75);
ctx.moveTo(125, 0);
ctx.lineTo(0, 75);
ctx.stroke();
</script>
Hope this helps you.