CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
MoHamed HaSsn
MoHamed HaSsn

Reputation: 555

Canvas Border HTML5

Hello People, I work on create html5 canvas project, I set canvas width equal to $(window).width and it's work well but the problems appear when I set border the horizontal scroll will be appear.

Note: I tried to use innerWidth() function but I have not yet found the right solution. Passion leads me to find out why this problem occurs.

$(document).ready(function () {
    $('canvas').width($(window).width());
    $('canvas').height($(window).height());
    console.log($(window).width())

})
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.home{
    width:100%;
    height:auto;
}
canvas{
    display:block;
    border:2px solid #0094ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home">
    <canvas id="myCanvas"></canvas>
</div>

Upvotes: 0

Views: 1539

Answers (3)

Qwertiy
Qwertiy

Reputation: 21400

When you are using .width and .height you are setting sizes of content regardless bos-sizing. Replace them via .css({width, height}). Also remove margin of body and set canvas display to block to prevent vertical scroll.

By the way, you don't need to set sizes from the script, but possibly you do need to set diminsions.

$(function () { // Only to set drawing scale of canvas, doesn't affect appearance
  var $window = $(window);
  var $canvas = $("canvas");
  var border = $canvas.css("border-width");
  
  $('canvas')
    .prop('width', $window.width() - 2 * border);
    .prop('height', $window.height() - 2 * border);
});
* {
  box-sizing: border-box;
}

html, body, canvas {
  display: block;
  margin: 0;
  height: 100%;
  width: 100%;
}

canvas{
  border: 2px solid #0094ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="myCanvas"></canvas>

Upvotes: 0

Navneet vaghasiya
Navneet vaghasiya

Reputation: 117

used this css and script

css

 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
 margin: 0px;
 padding: 0px;
}
.home{
width:100%;
height:auto;
}
canvas{
display:block;
border:2px solid #0094ff;
}

Script

$('canvas').width($(window).width() - 4);
$('canvas').height($(window).height() - 4);
console.log($(window).width());

Upvotes: 0

Saeed
Saeed

Reputation: 572

Remove this lines:

$('canvas').width($(window).width());
$('canvas').height($(window).height());
console.log($(window).width())

Set width and height with css:

canvas{
    display:block;
    border:2px solid #0094ff;
    width:100%;
    height:100%;
}

Upvotes: 1

Related Questions