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.

Table of Contents

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

Get the Html element object by it’s id.

var htmlObj = document.getElementById(elementId);

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";
```
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.

There is a drop-down list on the page top area, you can select the Html canvas CSS position attribute value here.

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.
The x-axis offset value and y-axis offset value just define the canvas object’s top-left corner point’s position.
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.

You can see this example demo video at the end of this article.
This example includes 2 source files, html5-set-canvas-top-left-offset.html & html5-set-canvas-top-left-offset.js.

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>

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';
}

Below is this example demo video.

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

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

Leave a Comment Cancel Reply