🎁 The Js-Craft Guide to React is now available with a 30% off discount!

HTML canvas redraw image on resize

So, how can we make an image drawn on an HTML canvas in a responsive way? There are two different steps here:

  1. do an initial responsive draw of the image on the canvas
  2. redrawing the HTML5 Canvas upon resizing

By the end of this article, we will build the below example:
HTML canvas redraw image on resize

If you want to skip ahead here is the full code of the example.

Step 1: Initial responsive draw of the image on the canvas

We have seen in a previous article how to draw an image, such as a png or jpeg, on an HTML 5 Canvas.

But that example draws at the same size as the original image. You give it a 300x300px image, to be drawn on a 300x300px canvas.

Given that we want our end result to be responsive, we will need to recalculate the canvas width and height based on the container's width. In this case the window.innerWidth.

Below is the Javascript code that will accomplish this:

const img = document.querySelector('#img')
const canvas = document.querySelector('#canvas')
const canvasContext = canvas.getContext("2d")

img.onload = ()=> {
    // first draw of the image
    drawCanvas()
}

function drawCanvas() {
    if (img.naturalWidth > window.innerWidth) {
        canvas.width = window.innerWidth;
        canvas.height = img.naturalHeight * ( window.innerWidth / img.naturalWidth );
    }
    else {
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
    }
    canvasContext.drawImage(img, 0, 0, canvas.width, canvas.height );
}

And the required HTML:

<canvas id="canvas"></canvas>
<img id="img" src="test.jpg" />

Step 2: Adding resize listeners and redrawing the canvas

Now, that we've made the initial canvas paint responsive the next step will be to watch for the resizing of the browser's window so that we can update the image that is drawn on the canvas.

Given that redrawing the image is quite a resource-intensive operation it's better to optimize with a debounce interval.

Basically, we are saying to redraw the image only when no other resize was not done in the past 1.5 seconds:

const img = document.querySelector('#img')
const canvas = document.querySelector('#canvas')
const canvasContext = canvas.getContext("2d")

img.onload = ()=> {
    // first draw of the image
    drawCanvas()
    // watch for window resize
    setResizeHandler()
}

function drawCanvas() {
    if (img.naturalWidth > window.innerWidth) {
        canvas.width = window.innerWidth;
        canvas.height = img.naturalHeight * ( window.innerWidth / img.naturalWidth );
    }
    else {ca
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
    }
    canvasContext.drawImage(img, 0, 0, canvas.width, canvas.height );
}

function setResizeHandler() {
    let timerId = null;
    window.addEventListener('resize', () => {
        if (timerId) {
            clearTimeout(timerId);
            timerId = undefined;
        }

        // 1.5sec after the  user stoped the resize
        // redraw the canvas on the new size
        timerId = setTimeout(() => {
            timerId = undefined;
            drawCanvas();
        }, 1500);
    });
}

And this is it! You can see the live example on Github pages and the full code here.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.


Leave a Reply

Your email address will not be published. Required fields are marked *

📘 The Guide to React Home Screencasts Best of Newsletter Search X

📘 - 10 Javascript AI projects with React and LangChain

Hi friend! Before you go, just wanted to let you know about the 10 Javascript AI projects ideas with React and LangChain FREE ebook.

One of the best ways to learn is by doing the work. Choose from these 10 project ideas and start working on topics such as:

  • How does LangChain work
  • Connecting to OpenAI LLM
  • Create AI Agents
  • Simple and Sequential Chains
  • Adding Memory (Chat Context)
  • Prompt Templates
  • Using OutputParsers and Tools for Agents
  • Work with Documents and more...

Keep building and see the new capabilities LLM models can add to your React app! Get all projects as an ebook right to your inbox!

X