Create a responsive canvas with custom shapes

Question

Create a responsive canvas with custom shapes

After designing a canvas with a gradient-filled circle, I encountered a challenge in making the canvas and the circle responsive to varying screen sizes.

Initially, I attempted to use `vh` and `vw` units for the width and height of the canvas. However, adjusting the window size resulted in the circle appearing distorted, either elongated or widened.

Question:

My goal is to proportionally decrease the size of the entire circle as the window size shrinks. How can I achieve this effect?

Code:

var c = document.getElementById('canvassun');
var ctx = c.getContext('2d');
var grd = ctx.createRadialGradient(85, 85, 20, 85, 85, 70);
grd.addColorStop(0, 'red');
grd.addColorStop(0.5, 'orange');
grd.addColorStop(0.8, 'yellow');
grd.addColorStop(1, 'white');
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(90, 90, 70, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath;

#canvassun {
  height: 30vh;
  width: 14vw;
  border: 1px solid black;
  margin: 0 auto;
  display: block;
  margin-top: 18%;
}

<canvas id="canvassun" width=170 height=170></canvas>

javascript html css canvas

Answer 1

Answer №1

Monitor the window resize event and update the canvas accordingly

function draw() {
  var canvas = document.getElementById('canvassun');
  var context = canvas.getContext('2d');
  var gradient = context.createRadialGradient(85, 85, 20, 85, 85, 70);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(0.5, 'orange');
  gradient.addColorStop(0.8, 'yellow');
  gradient.addColorStop(1, 'white');
  context.beginPath();
  context.fillStyle = gradient;
  context.arc(90, 90, 70, 0, 2 * Math.PI);
  context.fill();
  context.closePath;
}


window.addEventListener("resize", draw);

Please Note It may be necessary to debounce the draw function for better performance

Answer 2

Monitor the window resize event and update the canvas accordingly

function draw() {
  var canvas = document.getElementById('canvassun');
  var context = canvas.getContext('2d');
  var gradient = context.createRadialGradient(85, 85, 20, 85, 85, 70);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(0.5, 'orange');
  gradient.addColorStop(0.8, 'yellow');
  gradient.addColorStop(1, 'white');
  context.beginPath();
  context.fillStyle = gradient;
  context.arc(90, 90, 70, 0, 2 * Math.PI);
  context.fill();
  context.closePath;
}


window.addEventListener("resize", draw);

Please Note It may be necessary to debounce the draw function for better performance

Create a responsive canvas with custom shapes

Answer №1

Similar questions

Is it possible to have a single listener for all events within the jQuery event namespace?

Tips for evenly and fully stretching a set number of horizontal navigation items across a designated container

Switching background images with Javascript through hovering

How can I implement the ternary operator in React Native and resolve my code issue?

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

Guide to executing the "brew" command on a Windows operating system

Automatically update div content using AJAX in a different approach

Tips for entering multiple values in an input field

Does Angular 2/4 actually distinguish between cases?

CSS not functioning properly when attempting to set overflow property to scroll

How can the onclick event be activated by pressing the enter key with inline javascript?

What is the best way to revert the Highcharts bar color back to its default color?

Please input new items by clicking a button

Oops! We encountered an issue trying to find the "list" view in the views directory

Breaking Down Particular Phrases

Exploring the intricacies of parsing nested JSON data

How to capture text outside of a HTML tag using Selenium with Python?

Submitting content to numerous webpages

Jquery menu block shift

Issue with displaying record attribute as a text variable