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.
    htmlObj.style.position = "relative";
  3. Set the Html element object’s style.top & style.left attribute value to set the Html element top, left offset position.
    canvas.style.left = '10px';
    
    canvas.style.top = '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>
    <html>
    <head>
    <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>
    <style>
    canvas{
      display:block;
      margin-top:10px;
    }
    </style>
    </head>
    <body onload="initCanvas()">
    
    <h3>Html5 Set Canvas Top Left Offset Example.</h3>
    
    <div style="display:block;margin-top: 10px;">
    
        <p>
            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>
                      </select>
        </p>
    
        <p>
            Offset X: <input type="text" id="canvasLeft"/>
        </p>
        <p>
            Offset Y: <input type="text" id="canvasTop"/>
        </p>
        
        <input type="button" value="Set Canvas Offset" onclick="setCanvasOffset('canvas1', 'canvasPosition', 'canvasLeft', 'canvasTop')" />
    </div>
    
    <canvas id="canvas1"></canvas>
    
    </body>
    </html>
  8. html5-set-canvas-top-left-offset.js.
    function initCanvas(){
    
        var canvas = document.getElementById('canvas1');
    
        canvas.style.width = 300;
    
        canvas.style.height = 300;
    
        canvas.style.backgroundColor = 'blue';
    
        //canvas.style.position = "absolute";
    
        canvas.style.position = "relative";
    
        canvas.style.left = '0px';
    
        canvas.style.top = '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;
    
        canvas.style.position = canvasPosition;
    
        canvas.style.left = canvasLeftValue + 'px';
    
        canvas.style.top = canvasTopValue + 'px';
    }
  9. Below is this example demo video.

Leave a Comment

Your email address will not be published.

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

Clicky