i am trying to make different images , move in a circular path . I want it to be responsive at all screen sizes , pleaase how can i do so . You can use a div with a color to show an example of how to make the code work
im just a noob but with my trash english knowledge i think you need something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<div>
/* Declare canvas screen */
<canvas style="border: solid 3px" id="the-canvas" width="300" height="400"></canvas>
</div>
/* Script*/
<script>
/*Declare value to Interactive with canvas*/
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");
/* x and y is value declare canvas in js*/
var imageObject = new Image();
/*Image object is the thing to Contain image you want draw*/
var step = 0, radius = 50, speed = 0.05;
/* This is r of circle, step for howmany time image go, speed is speed*/
/* Function for spin image around*/
function spin() {
/*Clearrect to clear canvas and print new image in new place*/
y.clearRect(0, 0, x.width, x.height);
/* 0 0 is start of canvas it base on axis and Used for all canvas commands x.width and x.height is canvas width height*/ y.drawImage(imageObject, 100 + radius * Math.cos(speed * step), 200 + radius * Math.sin(speed * step));
++step;
}
/*This function make draw image and change Coordinates every time with cos sin (need math knowledge)*/
imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
/* Fps is frame per second*/ setInterval(spin, 50); // 20 fps
};
/*This is path to image in you rom*/
imageObject.src = "picturepath";
});
</script>
</body>
</html>
This code called Canvas very useful try change heigh and width and picture path