HTML Canvas and a little issue displaying correctly?

Question

I'm trying to adjust the size to correctly be position more in the middle and a larger div. I would like it to be 500x500. What I'm trying to do is do a classic version of what Windows Paint is.

The issue is adjusting the 'canvas' to the middle stops the paint brush to 'draw'.

Here is the code, I have so far.

<!DOCTYPE HTML>
<html>
  <head>
    <style>

    body {
    width: 500px;
    height: 500px;
    margin: auto;
    top: 50%; 
    left: 50%;
    width: 90%;
    border: 3px solid #73AD21;
    padding: 10px;

      }

    </style>
  </head>
  <body>
    <div id="paint" >
        <canvas id="myCanvas"></canvas>
    </div>
    <script>


var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.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.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';

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();
};

    </script>
  </body>
</html>

Answer 1

Get rid of the styling on body and replace it with this:

#paint {
  height: 500px;
  margin: auto;
  width: 90%; /* you also had width: 500px, which one did you want? */
  border: 3px solid #73AD21;
  padding: 10px;
}

Fiddle - Looks like it's working okay with that change.

HTML Canvas and a little issue displaying correctly?

Question

1 answers

solution1
2 2016-03-27 01:26:16

HTML Canvas and a little issue displaying correctly?

Question

1 answers

solution1 2 2016-03-27 01:26:16

solution1
2 2016-03-27 01:26:16