How To Set Html Element ( For Example Canvas ) Position Using Javascript

This example will show you how to set an Html element’s top & left offset position using javascript, through this method you can move a canvas object on an Html web page by specifying it’s top & left offset position.

1. How To Set An Html Element’s Top Left Offset Position Using Javascript?

  1. Get the Html element object by it’s id.
    var htmlObj = document.getElementById(elementId);
  2. Set the Html element object’s style.position attribute value to one of absolute(relative to the page’s top & left point), relative(relative to the above Html element ), fixed, static, sticky. = "relative";
  3. Set the Html element object’s & style.left attribute value to set the Html element top, left offset position. = '10px'; = '10px';

2. Move Html Canvas By Set It’s Top & Left Offset Example.

  1. There is a drop-down list on the page top area, you can select the Html canvas CSS position attribute value here.
  2. Below the drop-down list, there are 2 input text boxes, the above one is the x-axis offset value, and the below one is the y-axis offset value, you just need to input integer numbers.
  3. The x-axis offset value and y-axis offset value just define the canvas object’s top-left corner point’s position.
  4. Below the input text box is a button, when you click this button, it will invoke a javascript function to change the canvas’s top-left point coordinates to move the canvas.
  5. You can see this example demo video at the end of this article.
  6. This example includes 2 source files, html5-set-canvas-top-left-offset.html & html5-set-canvas-top-left-offset.js.
  7. html5-set-canvas-top-left-offset.html.
    <!DOCTYPE html>
    <meta charset="ISO-8859-1">
    <title>Html5 Set Canvas Top Left Offset Example</title>
    <script type="text/javascript" src="html5-set-canvas-top-left-offset.js" charset="utf-8"></script>
    <body onload="initCanvas()">
    <h3>Html5 Set Canvas Top Left Offset Example.</h3>
    <div style="display:block;margin-top: 10px;">
            Position: <select id="canvasPosition">
                        <option value="absolute">absolute</option>
                        <option value="fixed">fixed</option>
                        <option value="relative">relative</option>
                        <option value="static">static</option>
                        <option value="sticky">sticky</option>
            Offset X: <input type="text" id="canvasLeft"/>
            Offset Y: <input type="text" id="canvasTop"/>
        <input type="button" value="Set Canvas Offset" onclick="setCanvasOffset('canvas1', 'canvasPosition', 'canvasLeft', 'canvasTop')" />
    <canvas id="canvas1"></canvas>
  8. html5-set-canvas-top-left-offset.js.
    function initCanvas(){
        var canvas = document.getElementById('canvas1');
    = 300;
    = 300;
    = 'blue';
        // = "absolute";
    = "relative";
    = '0px';
    = '0px';
    function setCanvasOffset(canvasId, canvasPositionId, canvasLeftId, canvasTopId){
        var canvas = document.getElementById(canvasId);
        var selectedIndex = document.getElementById(canvasPositionId).selectedIndex;
        var canvasPosition = document.getElementById(canvasPositionId).options[selectedIndex];
        var canvasLeftValue = document.getElementById(canvasLeftId).value;
        var canvasTopValue = document.getElementById(canvasTopId).value;
    = canvasPosition;
    = canvasLeftValue + 'px';
    = canvasTopValue + 'px';
  9. Below is this example demo video.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.