Canvas scale question

**Ocean** · 08-01-2008, 02:38 PM

Hi All,

I'm new to the canvas element and trying to scale a part of a generated image. for example i create a 500 x 500 canvas and fill it with random dots. Then i would like to scale a part of that canvas, like a small region of 100x100. How can this be archieved? When i use the scale command it scales the whole canvas. Should paths be used for this? i can't seem to get this working.

Thanks for any helpfull comments.

**Jesdisciple** · 08-02-2008, 04:42 AM

This is JavaScript you're talking about, right - not PHP?

Can we see your code, preferably an online demonstration?

**Ocean** · 08-02-2008, 11:05 AM

Hiya yes im talking about javascript. Here is a link about the canvas example:
http://developer.mozilla.org/en/docs...cs_with_Canvas

Now im trying to do a scale on a canvas wihtout scaling the whole canvas but only a part of it. And i cant seem to find a good example for this.

**jscheuer1** · 08-02-2008, 02:51 PM

Please post a link to the page on your site that contains the problematic code so we can check it out.

**mburt** · 08-03-2008, 03:53 AM

Canvas is a new tag only available in Firefox 1.5 + apparently.

You might just be looking for this:

Code:

<canvas style="overflow:hidden;width:100px;height:100px;"></canvas>

You can control how much you push the margin by too:

Code:

<canvas style="overflow:hidden;width:100px;height:100px;padding-left:-50px;padding-top:-50px;"></canvas>

**jscheuer1** · 08-03-2008, 06:16 AM

Canvas isn't all that new. However, since it is only available in just about every browser, except IE, and it's use is rather complex, well you get the idea. IE has proprietary filters and vml that can accomplish similar tasks. Because of the fact that these work only in IE, and that they are at least as complex as the standard canvas method, they don't get much use either.

Here is a very basic example:

http://home.comcast.net/~jscheuer1/side/canvas/

Works in FF, Opera, and Safari - probably others - not in IE.

**mburt** · 08-03-2008, 09:01 PM

Code:

Works in FF, Opera, and Safari - probably others - not in IE.

Oops I sort of overlooked that. I just meant that it didn't work in IE for some reason. It was 3 in the morning last night haha, my brain wasn't really working at full capacity.

**Ocean** · 08-04-2008, 10:21 AM

Thanks for the replies so far. I'm still looking for an answer to my scale problem. I have attached some example code to explain a bit more the problem i have:

Code:

<html>
 <head>
  <script type="application/x-javascript">

    var ctx;
    var mapArrayX = [];
    var mapArrayY = [];

    function init()
    {
	ctx = document.getElementById('canvas').getContext('2d');
	ctx.fillStyle = '#08f';
	
 	var i = 0;
	for (i = 0; i <  1500; i++)
	{
		mapArrayX[i] = 50 + (Math.random() * 700);
		mapArrayY[i] = 50 + (Math.random() * 700);

		ctx.fillRect(mapArrayX[i],mapArrayY[i],3,3);
	}
    }

    function scale()
    {
	var i = 0;
	ctx.clearRect(0, 0, 750,750);

	ctx.beginPath();
             ctx.rect(250,200,100,50);
             ctx.stroke();  
	ctx.scale(0.5,0.5);
	ctx.closePath();

	for (i = 0; i < 1500; i++)
	   ctx.fillRect(mapArrayX[i],mapArrayY[i],3,3);
    }

  </script>
 </head>
 <body onload="init();">
   <table border=0>
   <tr>
	<td>
		   <canvas id="canvas" width="750" height="750"</canvas>
		   <button type="button" onClick="scale();">Scale</button>
	</td>
   </tr>
   </table>
 </body>
</html>

This will draw a canvas with some random dots on it. When pushing the scale button now the whole canvas is scaled. But what i would like to get is that it only scales a part (where the rectangle is now) instead of the whole canvas. Is this possible? or is the scale function bound to the whole canvas?

**jscheuer1** · 08-04-2008, 02:08 PM

You need to do more than that to affect just one area. And it doesn't look like you can easily just zoom in on a particular area. From what I can tell form the tutorial on scaling:

http://developer.mozilla.org/en/docs..._scale_example

and its example page:

http://developer.mozilla.org/samples...vas_scale.html

you need to first save the current state, identify your area for action, scale it, and draw to it, then restore the previous state.

But it isn't clear to me just what you are trying to do. Could you create before and after images of what you want your scale button should do?

**Ocean** · 08-04-2008, 04:14 PM

Thanks for the reply John. I have solved the problem by creating a secondary canvas and then use scale and the drawImage function.

Thread: Canvas scale question

Thread Tools

Search Thread

Canvas scale question

Bookmarks

Bookmarks

Posting Permissions