Home / Questions / 239075
Accepted
mperez
Asked: 2020-02-20 07:22:57 +0800 CST 2020-02-20 07:22:57 +0800 CST

Extend canvas of a canvas without altering the content

  • 772

By creating a canvas, I want it to always occupy the entire screen. canvasI am trying to automatically resize the window , but without changing the size of the graphic content it contains.

So that it occupies the entire screen when resizing I am using jQuery:

$(window).resize(function () {
   $("#myCanvas").css({ "width": "100%", "height": "100%" });
});

With this shape the content of the canvas is enlarged, and that is not what I am looking for. In the following images I show what I want to avoid. On the one hand, we have any image:

Screen image with small dimension

And with the jQuery code that I have written, when resizing the screen, the image contained in the canvas is deformed:

modified image

I have added the canvasto a divwith the intention of giving it context so that the canvas uses the dimension of the div to which it belongs, and modifying with jQuery the dimension not of the canvas, but of the div, but in this way the painting area of ​​the canvas. Do you know of a way to update the dimension of the canvas without altering the already existing graphic content? In the example above I draw a circle, but it could be any graphic element, known or not, so reloading it canvaswith the new size and redrawing the graphic component is not the solution I'm looking for. In the following code I leave the example of using canvasas a blackboard in which to draw by clicking and moving the mouse, as if it were a "paint".

Here is the code I am using for testing:

 $(window).resize(function () {
        $("#myCanvas").css({ "width": "100%", "height": "100%" });
    });

 var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        ctx.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
         var mouse = { x: 0, y: 0 };

    canvas.addEventListener('mousemove', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);
 ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
canvas.addEventListener('mousedown', function (e) {
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);

        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function () {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function () {
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
    };
 body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

javascript

1 Answers

  1. Best Answer

    Don't do it in CSS. Change the size of the canvas in JavaScript. To set the size of the canvas equal to the size of the windows I use c.width = window.innerWidth; c.height = window.innerHeight;. In the code I have left what you had.

    Pretty much all you have to do is redraw everything on the canvas on resize. But beware: the resize event is fired very frequently so it's better to do it in asetInterval

    var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
       /* 
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();*/


function Init(){
// recalcula el tamaño del canvas
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        // limpia el canvas
        ctx.clearRect(0,0,c.width,c.height);
        // vuelve a dibujar todo
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
}


window.setTimeout(function() {
  Init();

  window.addEventListener('resize', Init, false);
}, 15);
    body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100vh;
}

canvas{background:silver}
    <div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

    Update

    The OP has added his code. It turns out that you want to create a program where users can draw something.

    I have modified the code. When drawing on the canvas each point is stored in an array of arrays. when moving the mouse on the canvas, I first clear the canvas with clearRectand then redraw everything again.

    //un boleano utilizado para dibujar solo después de haver hecho clic en el canvas
let dibujamos = false;
// el array de los puntos utilizado para dibujar todo de nuevo
let puntos = [];
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.lineJoin = "round";
ctx.lineCap = "round";

let mouse = { x: 0, y: 0 };

canvas.addEventListener(
  "mousedown",
  function(e) {
    dibujamos = true;
    mouse = oMousePos(canvas, e);
    puntos.push([]);
  },
  false
);

canvas.addEventListener(
  "mousemove",
  e => {
    if (dibujamos) {
      mouse = oMousePos(canvas, e);
      puntos[puntos.length - 1].push({ x: mouse.x, y: mouse.y });
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      dibujar(puntos);
    }
  },
  false
);

canvas.addEventListener(
  "mouseup",
  function() {
    dibujamos = false;
  },
  false
);

function Init() {
  // recalcula el tamaño del canvas
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // limpia el canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // vuelve a dibujar todo
  dibujar(puntos);
}


// utiliza el array de puntos para dibujar de nuevo los trazados
function dibujar(puntos) {
  puntos.forEach(ry => {
    ctx.beginPath();
    ctx.moveTo(ry[0].x, ry[0].y);
    ry.forEach(p => {
      ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
  });
}


window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);


// una función para detectar la posición del ratón en el canvas
function oMousePos(canvas, evt) {
  let ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
    *{margin:0;padding:0}
canvas{background:#d9d9d9;}
    <canvas id="myCanvas"></canvas>

    If after all this you are still interested in knowing how to detect the mouse position in a resized canvas with css this could help: The mouse position

    • 4