can we get only an object on canvas

Question

For now i am saving whole canvas as image and works fine but i want only a rectnagle already drawn to save it as image.

i am using below code for saving whole canvas

//attempt to save base64 string to server using this var  

var dataUrl = document.getElementById('canvas').toDataURL(); 

var windowContent = '<!DOCTYPE html>';

windowContent += '<html>'

windowContent += '<head><title>Print canvas</title></head>';

windowContent += '<body>'

windowContent += '<a href="' + dataUrl + '" target="_blank"><img src="' + dataUrl + '"></a>';

windowContent += '</body>';

windowContent += '</html>';

var printWin = window.open('','','width=890,height=820');

printWin.document.open();

printWin.document.write(windowContent);

printWin.document.close();

printWin.focus();


//Lets say i made a rectangle -- Just example
context.beginPath();
context.moveTo(x + 32, y + 32);
context.rect(locX+1, locY+1, 26, 26);
context.closePath();
context.fillStyle = color;
context.fill();

Where is the rectangle on the canvas? How does it know which rectangle to get? — Zach Saucier, Aug 16 '13 at 12:30
can't write whole code its 700 lines as i said any object on canvas, edited above code — Raza, Aug 16 '13 at 12:45
Modify your HTML to show a cropped version of your image: http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped — Sebastian, Aug 16 '13 at 12:50
Maybe I'm not understanding the question, but can't you just create the rectangle as a separate object, like: `var dataUrl=document.getElementById("myCanvas"); var ctx1=dataUrl.getContext("2d"),ctx2=dataUrl.getContext("2d");ctx1.beginPath();ctx2.beginPath();`...this way you have separate objects. — cube, Aug 16 '13 at 12:55
As cube said you will probably have to create a second version on a new generated canvas to use if you only want that part — Zach Saucier, Aug 16 '13 at 13:06

score 1 · Accepted Answer · answered Aug 16 '13 at 21:20

“…i want only a rectnagle already drawn to save it as image.”

This can be read at least 2 ways:

I want to draw a rectangle on canvas and convert just that rectangle to an image.
I have already drawn a rectangle on the canvas and I want to save just that rect as an image.

Here’s how to do #2 assuming a 26x26 rect + 1px stroke is already on the canvas at xy=20,20.

This code "clips" the existing rectangle out of an existing canvas.

// create a temporary canvas
var tempcanvas=document.createElement("canvas");
var tempctx=tempcanvas.getContext("2d");

// size the tempcanvas to the rect width plus stroke width
tempcanvas.width=28;
tempcanvas.height=28;

// use drawImage to clip the rect from the existing canvas to the tempcanvas
tempctx.drawImage(canvas,19,19,28,28,0,0,28,28);

// save the tempcanvas as an image using toDataURL()
// For example,  use toDataURL as .src to an html img element with id=”clipped”
document.getElementById("clipped").src=tempcanvas.toDataURL();

Here’s how to do #1.

This code creates a new 28x28 temporary canvas and draws a rectangle on it

// create a temporary canvas
var tempcanvas1=document.createElement("canvas");
var tempctx1=tempcanvas1.getContext("2d");

// size the tempcanvas to the rect width plus stroke width
tempcanvas1.width=28;
tempcanvas1.height=28;

// draw a rect on the temp canvas
tempctx1.beginPath();
tempctx1.rect(0,0,26,26);
tempctx1.fillStyle="orange";
tempctx1.strokeStyle="lightgray";
tempctx1.fill();
tempctx1.lineWidth=1;
tempctx1.stroke();

// save the tempcanvas as an image using toDataURL()
// For example,  use toDataURL as .src to an html img element with id=”drawn”
document.getElementById("drawn").src=tempcanvas.toDataURL();

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/KrNJ7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

// draw a rect on a canvas 
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20,20,26,26);
ctx.fillStyle="orange";
ctx.strokeStyle="blue";
ctx.fill();
ctx.lineWidth=1;
ctx.stroke();

// clip the rect out of the canvas and save as an image
var tempcanvas=document.createElement("canvas");
var tempctx=tempcanvas.getContext("2d");
tempcanvas.width=28;
tempcanvas.height=28;
tempctx.drawImage(canvas,19,19,28,28,0,0,28,28);
document.getElementById("clipped").src=tempcanvas.toDataURL();

// create a new rect on a temp canvas and save as an image
var tempcanvas1=document.createElement("canvas");
var tempctx1=tempcanvas1.getContext("2d");
tempctx1.beginPath();
tempctx1.rect(0,0,26,26);
tempctx1.fillStyle="orange";
tempctx1.strokeStyle="lightgray";
tempctx1.fill();
tempctx1.lineWidth=1;
tempctx1.stroke();
document.getElementById("drawn").src=tempcanvas.toDataURL();


}); // end $(function(){});
</script>

</head>

<body>
    <p>A rect predrawn on a canvas</p>
    <canvas id="canvas" width=50 height=50></canvas>
    <p>An image of just the rect clipped from the canvas above</p>
    <img id="clipped" width=28 height=28>
    <p>An image of just a rect created on a temp canvas</p>
    <img id="drawn" width=26 height=26>
</body>
</html>

can we get only an object on canvas

1 Answers1