How to organize multiple html elements based on xy coordinates and width-height?

Question

I am developing an application for digital signage in HTML5, in which I will have a screen that will play / show various media settings of the user. I have several elements like videos, images, widgets, ticker, etc. I have the xy axis of the elements and their height / width, I want to arrange them exactly based on the information given. I will get the data in xml / json.

I tried with simple CSS, but it does not work as expected. I tried SVG and Canvas, but they do not support all html elements.

Answer 1

You can simply position elements using absolute from Javascript:

 function absElement(type, x, y, w, h) { let d = document.createElement(type); d.style.position = "absolute"; d.style.left = x + "px"; d.style.top = y + "px"; d.style.width = w + "px"; d.style.height = h + "px"; document.body.appendChild(d); return d; } 

Then you can use it as

 absElement("img", 100, 200, 400, 200).src = "myimage.jpg";