Can I change the x and y position of a canvas element in Javascript without using CSS? I cannot seem to find anyone who even asks it on the Internet.
EDIT: Can it be done in HTML?
<html>
<title>Testing</title>
<canvas id="main" width="200" height="200" style="border:1px solid #c3c3c3;">
Error: Browser does not support canvas element.
</canvas>
<script type="text/javascript">
var main = document.getElementById("main");
var render = main.getContext("2d");
main.width = 200;
main.height = 200;
main.style.left = 100x;
main.style.top = 100px;
</script>
</html>
Can I change the x and y position of a canvas element in Javascript without using CSS? I cannot seem to find anyone who even asks it on the Internet.
EDIT: Can it be done in HTML?
<html>
<title>Testing</title>
<canvas id="main" width="200" height="200" style="border:1px solid #c3c3c3;">
Error: Browser does not support canvas element.
</canvas>
<script type="text/javascript">
var main = document.getElementById("main");
var render = main.getContext("2d");
main.width = 200;
main.height = 200;
main.style.left = 100x;
main.style.top = 100px;
</script>
</html>
- Perhaps describe what you are trying to achieve and why. That will allow a better quality of answer. – Jivings Commented Feb 9, 2012 at 23:17
- 1 I want to set the position (x, y) of the canvas element in the window in Google Chrome. Is there any code I could use to do this? – MrDrProfessorTyler Commented Feb 9, 2012 at 23:17
- 1 Do you mean without using top and left css properties? By the way why don't you want to use css? – Andrei Schneider Commented Feb 9, 2012 at 23:18
- Because I want to know if it is possible to be done in Javascript alone. – MrDrProfessorTyler Commented Feb 9, 2012 at 23:19
- Yes it is, but it serves no purpose. JavaScript is not for aligning your DOM elements. That's why we have CSS. – Jivings Commented Feb 9, 2012 at 23:20
2 Answers
Reset to default 11<html>
<title>Testing</title>
<canvas id="main" width="200" height="200" style="border:1px solid #c3c3c3;">
Error: Browser does not support canvas element.
</canvas>
<script type="text/javascript">
var main = document.getElementById("main");
var render = main.getContext("2d");
main.width = 200;
main.height = 200;
main.style.left = "100px";
main.style.top = "100px";
main.style.position = "absolute";
</script>
</html>
CSS is used to manage the properties that, among other things, position elements on the page. If you choose not to define a top or left property in the CSS file or in an inline style, you can still set those properties after the canvas is loaded in the DOM using Javascript. However, all you'd be doing with the script is directly altering the same properties that CSS already manages.
There is no technical advantage to using JS to alter properties in lieu of a stylesheet or inline style, unless you're changing it dynamically after the page has already loaded content with the default styles. If you're looking to do animation, check out jQuery for a really nice, cross-browser solution for DOM animation. There is already an answer posted for the basic code to set position once using JS, which as I said is a role best reserved for CSS.