Responsive Canvas in Bootstrap

Question

I'm trying to do a responsive canvas. All my tests has been doing with a 600x600 canvas and with that height and width it works OK and paint every line correctly. The problem is that I have tried this:

 #myCanvas {
    background-color: #ffffff;
    border:1px solid #000000;
    min-height: 600px;
    height: 100%;
    width: 100%;
 }

Just for the record, myCanvas is inside a sm-col-8.

And it looks nice on my laptop and looks nice on my phone but (because of my draw() function, because it was thinking for a square) the draw starts more like in the down-left corner (nearby) and it should start at up-right corner.

So, I don't want to change my draw() function but what I'm looking for is to reescale the canvas size. I mean: If I'm in a laptop/tablet.. with 600x600, show it at that size, but if I'm on my phone which has 384x640 show it like 300x300? I don't know if it could be a good solution.

My draw function:

function drawLines(lines,i,table,xtotal,ytotal){

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var xIni;
    var xFin;
    var yIni;
    var yFin;

    xIni = (c.width*parseInt(lines[i][1])/xtotal);
    yIni = (c.height*parseInt(lines[i][2])/ytotal);
    xFin = (c.width*parseInt(lines[i][3])/xtotal);
    yFin = (c.height*parseInt(lines[i][4])/ytotal);

    ctx.beginPath();
    ctx.moveTo(xIni,c.height-yIni);
    ctx.lineTo(xFin,c.height-yFin);
    ctx.lineWidth=4;

    ctx.strokeStyle = colorAleatorio();

    ctx.stroke();

}

Answer 1

With Bootstrap, use:

<canvas id="canvas" class='img-responsive' style="border: 1px solid black;"></canvas>

Answer 2

You can make your html Canvas responsive by using the context.scale command.

The .scale command will scale the internal coordinates system used by canvas.

This means you do not need to change any of your own drawing coordinates because canvas will automatically transform your coordinates into scaled canvas coordinates for you.

// save the original width,height used in drawLines()
var origWidth=600;
var origHeight=600;
var scale=1.00;


// reference to canvas and context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// call this after resizing
// send in the new maximum width,height desired
function resizeAndRedraw(newMaxWidth,newMaxHeight){

    // calc the global scaling factor that fits into the new size
    // and also maintains the original aspect ratio
    scale=Math.min((newMaxWidth/origWidth),(newMaxHeight/origHeight))

    // resize the canvas while maintaining correct aspect ratio
    canvas.width=origWidth*scale;
    canvas.height=origHeight*scale;

    // Note: changing the canvas element's width or height will
    // erase the canvas so you must reissue all your drawing commands        
    drawLines(lines,i,table,xtotal,ytotal);

}


// call drawLines 
function drawLines(lines,i,table,xtotal,ytotal){

    // scale the canvas coordinate system to the current scale
    // Note: This scales the coordinates used internally
    // by canvas. It does not resize the canvas element
    ctx.scale(s,s);

    // now do your drawing commands
    // You do not need to adjust your drawing coordinates because
    // the Canvas will do that for you
    var xIni;
    var xFin;
    var yIni;
    var yFin;

    xIni = (c.width*parseInt(lines[i][1])/xtotal);
    yIni = (c.height*parseInt(lines[i][2])/ytotal);
    xFin = (c.width*parseInt(lines[i][3])/xtotal);
    yFin = (c.height*parseInt(lines[i][4])/ytotal);

    ctx.beginPath();
    ctx.moveTo(xIni,c.height-yIni);
    ctx.lineTo(xFin,c.height-yFin);
    ctx.lineWidth=4;

    ctx.strokeStyle = colorAleatorio();

    ctx.stroke();

    // restore the context to it's unscaled state
    ctx.scale(-s,-s);

}