How do I place an image on the screen?

I have:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport", content="width=device-width, initial-scale=1.0">
       <title>Image</title>
       <link rel="stylesheet" href="image.css">
       <script src="image.js"></script>
    </head>
    <body>
        <h1>Image</h1>
        <canvas id="board"></canvas>
    </body>
</html>
body{
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}
var blockSize = 25;
var rows = 20;
var cols = 20;
var board;
var context;
var colorX = blockSize * 5;
var colorY = blockSize * 5;
window.onload = function() {
    board = document.getElementById("board");
    board.height = rows * blockSize;
    board.width = cols * blockSize;
    context = board.getContext("2d"); 
    update();
}
function update() {
    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);
    context.fillStyle="red";
    context.fillRect(colorX, colorY, blockSize, blockSize);
}

​This places a colored square on the screen. How do I place an image on the screen?

In the simplest way:-

<img src="path/to/image.png" alt="Description of the image" width="300" height="200">

If you need something more specific, you must ask a more specific question.

1 Like

I have Ballistic.jpg in the same folder as the other files. I tried:

 <img src="Ballistic.jpg" alt="Description of the image" width="300" height="200"></img>

and

<img src="D:/__/Ballistic.jpg" alt="Description of the image" width="300" height="200"></img>

Neither works.

I had left

    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="red";
    context.fillRect(colorX, colorY, blockSize, blockSize);

which no longer displays.

There is no need for the closing tag on an image element. Though that should not stop it working.
There must be some other reason, as that should show the image if it is in the same folder as the HTML.

Maybe explain in detail exactly what it is you want to acheive, as putting an image on a page is a very basic HTML task, which is something you should be able to grasp before trying to tackle javascipt.

I want an image on the screen, which I eventually want to move around on the screen. The screen needs a background. I think JavaScript can move the image based on keyboard inputs.

I tried both of these:

function update() {
    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="red";
    context.fillRect(colorX, colorY, blockSize, blockSize);

    <img src="D:\__\Ballistic.jpg" alt="Description" width="300" height="200"></img>
}

and

function update() {
    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="red";
    context.fillRect(colorX, colorY, blockSize, blockSize);

    <img src="D:/__/Ballistic.jpg" alt="Description" width="300" height="200"></img>
}

Neither work.

Now I see the problem.
The piece of code I gave you is HTML, not javascript.
It needs to go in the HTML body, not in the javascript block/file.

So you want the movement of the image to be user controlled, not a pre-defined animation?

So first you want to insert a canvas element on the screen, then put a jpg into the canvas, then JavaScript commands will put the jpg into position? Is this what you are trying to do?

If not, then please be more specific. Perhaps add notes to your code to let us know what it is supposed to do so we can follow the logic and your intentions for it.

Yes. I want an static image for the background. Then I want a second image that can be moved around on the background. I’m interested in a code example. Thanks!

I did a Google search. See if this answer from Roko C. Buljan addresses your question.

At that StackOverflow post, It’s not clear to me how to place a background or object on the background using JavaScript.

Then your request is still not clear. Please write out all your details in text only, step by step. Forget about the code.

Also, what are you trying to create, when all is done? What does the user do?

I want to create a website which depicts streets with an intersection. The user controls a car to move forward … or turn at the intersection … or stops because there is a dog crossing the street … or backs up. Keys on the keyboard specify actions of the car.

I want to start with the background (street) and the car.

Will the background remain static, or will the streets move around?

Are you saying that the object will not originally appear with the streets, but must be placed there (through JavaScript)? Like choosing a car on a button, then the car appears on the street?

You can have an image on top of another image using canvas.

JavaScript

let canvas, ctx;

document.addEventListener('DOMContentLoaded', (ev) => {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.width = 600;
    canvas.height = 400;

    let imgObj = new Image();

    imgObj.onload = function () {
        let w = canvas.width;
        let nw = imgObj.naturalWidth;
        let nh = imgObj.naturalHeight;
        let aspect = nw / nh;
        let h = w / aspect; // calculate height maintaining the aspect ratio of the image

        canvas.height = h; // set canvas height according to calculated height
        ctx.drawImage(imgObj, 0, 0, w, h); // draw image to canvas with adjusted width and height
        
        // Drawing another smaller image on top of the first one
        let smallImg = new Image();
        smallImg.onload = function () {
            let smallW = 100; // width of the smaller image
            let smallH = 100; // height of the smaller image
            let posX = 450; // x-coordinate where the top-left corner of the smaller image will be drawn
            let posY = 130; // y-coordinate where the top-left corner of the smaller image will be drawn
            ctx.drawImage(smallImg, posX, posY, smallW, smallH);
        }
        smallImg.src = "https://assets.codepen.io/82416/img-belted-kingfisher.png"; // replace with the actual URL of the smaller image
    }

    imgObj.src = "https://assets.codepen.io/82416/img-downy-woodpecker-codepen-001.jpg?width=960&height=640&format=auto";
})

HTML

<div id="canvasContainer">
<canvas id="canvas" width="900" height="520">Your browser does not support Canvase</canvas>
</div>

CSS

#canvasContainer {
  display: flex;
  justify-content: center;
  margin: 1.250em;
}

Here’s the CodePen
https://codepen.io/Strider64/pen/bGxyXLy/fd732b8b3c63ef18c2bacecdc490b748

This is merely a demonstration of how to overlay one image on another. In my view, with some additional coding, adjusting the position of the smaller image wouldn’t be particularly challenging.

1 Like

Pepster64, This is an exceptional example!!! It works! Thanks!

Pepster64, I posted a question about controlling the location of the Front image:

“Using arrows on the keyboard, how do I control the location of an image on a background image?”

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.