Skip to content

Commit b60b4b2

Browse files
niklasvhniklasvh
committed
Add option to use existing canvas for rendering
1 parent bd1abe1 commit b60b4b2

File tree

5 files changed

+66
-10
lines changed

5 files changed

+66
-10
lines changed

‎dist/html2canvas.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -628,7 +628,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
628628
var parser = new NodeParser(node, renderer, support, imageLoader, options);
629629
return parser.ready.then(function() {
630630
log("Finished rendering");
631-
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
631+
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
632632
cleanupContainer(container, options);
633633
return canvas;
634634
});
@@ -2679,9 +2679,11 @@ function XHR(url) {
26792679

26802680
function CanvasRenderer(width, height) {
26812681
Renderer.apply(this, arguments);
2682-
this.canvas = this.document.createElement("canvas");
2683-
this.canvas.width = width;
2684-
this.canvas.height = height;
2682+
this.canvas = this.options.canvas || this.document.createElement("canvas");
2683+
if (!this.options.canvas) {
2684+
this.canvas.width = width;
2685+
this.canvas.height = height;
2686+
}
26852687
this.ctx = this.canvas.getContext("2d");
26862688
this.taintCtx = this.document.createElement("canvas").getContext("2d");
26872689
this.ctx.textBaseline = "bottom";

‎dist/html2canvas.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/existing_canvas.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Using an existing canvas to draw on</title>
6+
<style>
7+
canvas {
8+
border: 1px solid black;
9+
}
10+
button {
11+
clear: both;
12+
display: block;
13+
}
14+
#content {
15+
background: rgba(100, 255, 255, 0.5);
16+
padding: 50px 10px;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div><h1>HTML content to render:</h1>
22+
<div id="content">Render the content in this element <strong>only</strong> onto the existing canvas element</div>
23+
</div>
24+
<h1>Existing canvas:</h1>
25+
<canvas width="500" height="200"></canvas>
26+
<script type="text/javascript" src="../dist/html2canvas.js"></script>
27+
<button>Run html2canvas</button>
28+
<script type="text/javascript">
29+
var canvas = document.querySelector("canvas");
30+
var ctx = canvas.getContext("2d");
31+
32+
var ctx = canvas.getContext('2d');
33+
34+
ctx.beginPath();
35+
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
36+
ctx.moveTo(110,75);
37+
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
38+
ctx.moveTo(65,65);
39+
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
40+
ctx.moveTo(95,65);
41+
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
42+
ctx.stroke();
43+
44+
document.querySelector("button").addEventListener("click", function() {
45+
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
46+
console.log('Drew on the existing canvas');
47+
});
48+
}, false);
49+
50+
</script>
51+
</body>
52+
</html>

‎src/core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
6060
var parser = new NodeParser(node, renderer, support, imageLoader, options);
6161
return parser.ready.then(function() {
6262
log("Finished rendering");
63-
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
63+
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
6464
cleanupContainer(container, options);
6565
return canvas;
6666
});

‎src/renderers/canvas.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
function CanvasRenderer(width, height) {
22
Renderer.apply(this, arguments);
3-
this.canvas = this.document.createElement("canvas");
4-
this.canvas.width = width;
5-
this.canvas.height = height;
3+
this.canvas = this.options.canvas || this.document.createElement("canvas");
4+
if (!this.options.canvas) {
5+
this.canvas.width = width;
6+
this.canvas.height = height;
7+
}
68
this.ctx = this.canvas.getContext("2d");
79
this.taintCtx = this.document.createElement("canvas").getContext("2d");
810
this.ctx.textBaseline = "bottom";

0 commit comments

Comments
 (0)