Tengo un elemento de lienzo con 3 círculos que se muestra bien y cabe en pantallas grandes. Pero con pantallas más pequeñas, el contenido sale del lienzo.
HTML:
<canvas id="canvas"></canvas>JS:
const canv = document.getElementById('canvas'), context = canv.getContext('2d'); //Set canvas width and height equals to screen width and height canv.height = window.innerHeight; canv.width = window.innerWidth; //Draw circles for(let i = 300; i < 950; i+=300){ if(i < 900){ context.fillRect(i + 150, 350, 100, 10); } context.beginPath(); context.arc(i + 50, 350, 100, Math.PI * 2, false); context.stroke(); }Aquí hay un violín en vivo: https://jsfiddle.net/ep3yjs5q
¿Cómo hacer que los 3 círculos respondan? ¿Puedo usar porcentajes para las dimensiones?
Sí, puedes usar porcentajes. Según el código que proporcionó, asumo que sus cálculos para el tamaño y la posición de los círculos se basan en un lienzo que tiene un ancho de 1300 píxeles.
Hagamos las matemáticas:
Con esta información podemos calcular el ancho/alto/espaciado apropiado para el tamaño real del lienzo:
const canv = document.getElementById('canvas'), context = canv.getContext('2d'); canv.height = window.innerHeight; canv.width = window.innerWidth; let diameter = (200 / 1300) * canv.width; let spacing = (300 / 1300) * canv.width; let barHeight = (30 / 1300) * canv.height; let startX = canv.width / 2 - spacing; let startY = canv.height / 2; for (let i = 0; i < 3; i++) { if (i < 2) { context.fillRect(startX + i * spacing + diameter / 2, startY, spacing - diameter, barHeight); } context.beginPath(); context.arc(startX + i * spacing, startY, diameter / 2, Math.PI * 2, false); context.stroke(); context.closePath(); } <canvas id="canvas" style="background: #dddddd"></canvas>