Menu
I'm currently developing a drawing app which allows the user to click and drag to determine the size of the shape and also be able to make transformations with the shape drawn. This is the screenshot of what i have till now:
I positioned the axis in the center of the canvas but now i want to write (0,0) in the center. As you can see, the CSS i wrote only makes it appear at the top but i want it at the center. Here's my codes for the transformation.html:
<!DOCTYPE html>
<head>
<title>Drawing Application</title>
<link href="transform.css" rel="stylesheet">
</head>
<body>
<canvas id="myCanvas" width="1000" height="500"></canvas>
<span style="margin-left:820px; margin-top:500px;">(0,0)</span> <!--tried with some CSS-->
<br><output id="out"></output>
<script src="transform.js"></script>
<div id="shapeProperties">
<p>
<label>
<div id="shape">
<p><b>Fill shapes option:</b> <input type="checkbox" id="fillType"></b><br/>
<p><b><center><u>Shapes</u></center></b>
<p>Polygon <input type="checkbox" id="polyBox"><br/>
</div>
<div id="color">
<b><p><center><u>Color Properties</u></center></b><br/>
<p>Fill Color <input type="color" id="fillColor" value="#000000"/><br/>
<p>Stroke Color <input type="color" id="strokeColor" value="#000000"/><br/>
</div>
<div id="range">
<b><p><center><u>Other Properties</u></center></b><br/>
<label>Polygon Sides <input type="range" id="polygonSide" step="1" min="3" max="9" value="3"></label>
</div>
<div id="clear">
<p> <center><input id="clearCanvas" type="button" value="CLEAR"></center></p>
</div>
</label>
</p>
</div>
</body>
</html>
How can i do this? If you need the transformation.js please let me know. Any suggestions will be appreciated. Thanks.
275
You can transform the default canvas coordinate system into a Cartesian coordinate system by moving its origin to the center of the canvas.
If you want drawing point x=0, y=0 to be at the center of the canvas, you can use context.translate to reset the origin to center canvas:
Then all drawing points start at 0,0 on the center of the canvas. All coordinates to the left of center canvas are negative. All coordinates below center canvas are negative.
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
// set the canvas origin (0,0) to center canvas
// All coordinates to the left of center canvas are negative
// All coordinates below center canvas are negative
context.translate(canvas.width/2,canvas.height/2);
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
// set the canvas origin (0,0) to center canvas
// All coordinates to the left of center canvas are negative
// All coordinates below center canvas are negative
context.translate(canvas.width/2,canvas.height/2);
// draw a dot at the new origin
context.beginPath();
context.arc(0,0,5,0,Math.PI*2);
context.closePath();
context.fill();
context.textAlign='center';
context.fillText('[ 0, 0 ]',0,-10);body{ background-color: ivory; }
canvas{border:1px solid red;}<canvas id="myCanvas" width=300 height=300></canvas>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
