How to size img embedded in canvas using JS?

Question

JavaScript

Hello guys, I'm doing a test task for the first job, I studied HTML and CSS for a long time and now it's not a big problem to make up a page, there is a background planet in the test task, but I firmly decided that this fucking planet should rotate, first I filed a gif from the video - 65mb weight - inserted everything works, but 65mb CARL!!! What's the problem with making fewer frames in a gif? - it turns out to be quarrelsome, but in the project, the code is merciless, where else to put a quarrelsome gif? Well, the day is lost, go look for solutions - and voila, an article from a dude about canvas and JS - his code works and looks right.
This is a solution to the issue, if not for one thing, but my picture and a translucent sphere with shadows are inserted on a large scale, I need the height of the picture and the actual sphere to be equal to the height of the block like the author’s - but I don’t know how to implement this, I’m not strong in JS, PAMAGITI, the code below, commented out the rotation since I don’t need it yet, the link to the article of the author of the code is also available https://habr.com/ru/post/268975/
HTML
CSS
.space-bg
display: block
width: 100vw
height: 100vh
position: relative
background: url(../img/space.jpg) 0 0 no-repeat
background-size: 100%
#planet
width: 512px
height: 512px
position: absolute
left: 0
top: 0
border-radius: 50%
Inpany JS
$(function(){
var pl_id = 'planet';
var image = new Image();
image.src = '../img/mars_canvas1.jpg';
// load shadow image and planet highlights
var fxShadow = new Image();
fxShadow.src = '../img/planet_shadow1.png';
// define the length and height of the canvas element
var width = $('#'+pl_id).width();
var height = $('#'+pl_id).height();
// Calculate the rotation angle of the planet
// var beta = 0/900;
// var beta = (beta*Math.PI)/360;
// var l = (Math.sqrt(width*width+width*width))/2
// var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI /4);
// var b = 2*l*Math.sin(beta/2);
// varx = b*Math.sin(gam);
// var y = b*Math.cos(gam);
// var p1 = Math.cos(beta);
// var p2 = Math.sin(beta);
var canvas = document.getElementById(pl_id);
var id = canvas.getContext("2d");
var newMoveWidth = 0;
var newMoveHeight = 0;
var drawPl = function(){
id. clearRect(0, 0, width, height);
// apply rotation to our planet
// id. transform(p1, p2, -p2, p1, x, -y);
// draw a map with new coordinates inside the element
id. drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height);
// add shadow and highlights
id.drawImage(fxShadow, 0, 0, width, height);
// if the shift has reached the limit, start over
if (newMoveWidth >= 2047.5) newMoveWidth = 0;
else newMoveWidth = newMoveWidth+0.5; // otherwise move the map further
}
setInterval(drawPl, 50); // start animation at 50ms speed.
});

Answer 1

<div class="space-bg">
      <canvas id="planet">   
      </canvas>
    </div>