This question already has answers here:
html5: copy a canvas to image and back
(3 answers)
Closed 9 years ago.
how to take screenshot of canvas?
or How create image, which will consist of image + free zone , located on canvas?
It depends on your framework but basically you can use canvas.toDataURL()
Here is a complete example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
dataUrl will contains the image and you can save it wherever you want.
It depends what you want to do, the easiest way is to use toDataUrl on your canvas.
canvas.toDataURL('png')
This will encode your canvas to base64, then you could use it in a download link like this
<a href="%dataURI%" download>download</a>
Or just stick it back into the dom in an image tag.
You can then write a controller which is more backend using what ever language to convert that base64 to an image file if you wanted to store an actual copy off the image.
See this post for more info
How to save a PNG image server-side, from a base64 data string
Related
This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Closed 1 year ago.
If run below code and DOM, my browser is renderred double all height value.
First, I tested below code in about:blank.
In html:
...
<canvas id="canvasArea" style="
width: 500px;
height: 500px;
background-color: E0E0E0;
"></canvas>
...
and In js:
let cv = document.getElementById("canvasArea");
let cvArea = cv.getContent('2d');
cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square
cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangle
I was thinking first rect will be draw square.
But first is long rectangle.
Why does this happen?
JS Canvases are not aware of dimensions set by CSS.
Use HTML attributes or set using JS.
let cv = document.getElementById("canvasArea");
let cvArea = cv.getContext('2d');
cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square
//cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangle
<canvas id="canvasArea" width="500" height="500" style="
background-color: #E0E0E0;
"></canvas>
Task
Have a canvas in your page
<canvas id="pdfCanvas">
create a fabric canvas for existing canvas
new fabric.Canvas("pdfCanvas");
have mouse.down, mouse.up, mouse.move methods to enable drawing rectangles
render pdf in the above canvas "pdfCanvas" using PDF.js
browser now shows the rendered PDF
now draw rectangles on the pdf, it hides the rendered canvas but it does draw objects
Problem
Here is the fiddle to see the issue:
- run the above https://jsfiddle.net/hiitskiran/wgz8qore/2/
- you can see the fabric rectangle is hiding behind the rendered pdf
- click on the pdf canvas area to see the fabric objects
What I see from your fiddle is that you don't wait the result of page.render method, which is asyncronous, then, unfortunately, if you wait the page.render, the fabric.canvas instance will clean your previously filled canvas, and we can't do nothing for this.
So I tried another approach: First of all, I wait the pdf.js page.render method, then I invoke the .toDataURL of your previously filled canvas so that I can have a copy of the old content, then I set your previously filled canvas as background of your new fabric.canvas and finish to draw your rectangle.
var url = 'http://www.africau.edu/images/default/sample.pdf';
var canvas = document.getElementById('pdfcanvas');
var context = canvas.getContext('2d');
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
}).then(function() {
var bg = canvas.toDataURL("image/png");
var fcanvas = new fabric.Canvas("pdfcanvas", {
selection: false
});
fcanvas.setBackgroundImage(bg,fcanvas.renderAll.bind(fcanvas));
fcanvas.setWidth(300);
fcanvas.setHeight(300);
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#FF454F',
opacity: 0.5,
transparentCorners: true,
borderColor: "gray",
cornerColor: "gray",
cornerSize: 5
});
fcanvas.add(rect);
fcanvas.renderAll();
});
});
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<canvas id="pdfcanvas" style="border:1px solid black"></canvas>
I am trying to display multiple images in a PDF using jspdf. It only shows the first image. It's not showing another image? Can we show multiple images using jspdf? Here is my code:
PLUNKER: http://plnkr.co/edit/HxharsFKeOPn2JgTb6pu?p=preview
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180, 'Octonyan');
doc.addImage('Octonyan', 'JPEG', 15, 400, 180, 180);
doc.save('Test.pdf');
You're adding an image outside of the page of a single-paged document
The following works, mind the changed y coordinate 400 -> 220
doc.addImage(imgData1, 'JPEG', 15, 220, 180, 180);
Here's my code. Need help with drawing an image of a cloud in between the mountain landscape using html 5 canvas element and javascript code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<canvas id="myCanvas" style="border:2px solid black;"></canvas>
</head>
<body>
<script>
var c= document.getElementById("myCanvas");
var d=c.getContext("2d");
d.beginPath();
d.strokeStyle="red";
d.moveTo(0,50);<!-- width is 0 and height is 50-->
d.lineTo(100,0);
d.moveTo(100,0);<!-- width is 0 and height is 50-->
d.lineTo(150,50);
d.moveTo(150,50);
d.lineTo(200,0);
d.moveTo(200,0);
d.lineTo(300,50);
d.lineTo(0,50);
d.stroke();
d.beginPath();
d.arc(150,15,10,0,2*Math.PI);
d.stroke();
d.beginPath();
d.strokeStyle="black";
d.moveTo(100,100);
d.lineTo(200,100);
d.lineTo(150,60);
d.lineTo(100,100);
d.lineTo(100,150);
d.lineTo(200,150);
d.lineTo(200,100);
d.stroke();
d.moveTo(135,150);
d.lineTo(135,120);
d.lineTo(135,120);
d.lineTo(160,120);
d.lineTo(160,150);
d.stroke();
d.beginPath();
d.arc(20,20,10,.25*Math.PI,.75*Math.PI);
d.stroke();
</script>
</body>
</html>
Please add any suitable code below mine to include the image of a cloud
You can draw clouds using cubic Bezier curves.
You can also move and resize the clouds as needed using transforms. The translate command will move the starting [x,y] point of your drawing. The scale command will scale the drawing larger and smaller.
Another set of useful commands is save() and restore(). context.save()will save the context state before you change drawing colors or do transformes. context.restore() will restore the original context as it existed before the last context.save. Otherwise, you would need to manually undo all the transforms and reset the colors.
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var d=canvas.getContext("2d");
d.fillStyle='skyblue';
d.fillRect(0,0,canvas.width,canvas.height);
cloud(50,100,0.50);
function cloud(x,y,scale){
d.save();
d.translate(x,y);
d.scale(scale,scale);
d.beginPath();
d.moveTo(0, 0);
d.bezierCurveTo(-40, 20, -40, 70, 60, 70);
d.bezierCurveTo(80, 100, 150, 100, 170, 70);
d.bezierCurveTo(250, 70, 250, 40, 220, 20);
d.bezierCurveTo(260, -40, 200, -50, 170, -30);
d.bezierCurveTo(150, -75, 80, -60, 80, -30);
d.bezierCurveTo(30, -75, -20, -60, 0, 0);
d.strokeStyle='lightgray';
d.fillStyle='white';
d.fill();
d.stroke();
d.restore();
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
#markE Apologies, my message was unclear.
I 100% agree with you. I upvoted your answer because it is absolutely the correct and most flexible way to do this! I assumed OP would have loved your answer.
I was surprised to read, after your thorough explanation, that #newbie said "..it did not answer my original question which required creating clouds with arc...".
I was just trying to answer him, but was trying to point out that using arc() would be inflexible and not recommended.
Sorry for the misinterpretation.
I should just rewrite my response to say: "Ditto what #markE said" :)
I just finished my first JavaScript book, "Head First HTML5", and I'm feeling quite dumb. If i put the script in the HTML file it works, but doesn't work in a separate JavaScript file.
HTML file:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="canArt.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</head>
JS file:
window.onload = init();
function init() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
please help.
Your immediately executing the init function by including the parens and assigning the result of init, which is nothing, to the onload handler...
change:
window.onload = init();
to:
window.onload = init;
http://jsfiddle.net/sFmNw/