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.
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.
Share Improve this question asked Apr 20, 2015 at 8:06 Manisha Singh SanooManisha Singh Sanoo 9291 gold badge14 silver badges44 bronze badges2 Answers
Reset to default 12You 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>You just have to set the canvas element to position: absolute or even position: relative, while having canvas as z-index: 1 and span as z-index: 2.
Try this:-
<canvas id="myCanvas" width="1000" height="500" style="position: absolute; z-index: 1"></canvas>
<span style="position: absolute; z-index: 2; margin-left:830px; margin-top:280px; background-color:white; font-size:15px;">(0,0)</span>