Canvas APIを使ってお絵描き

canvas-api.markdown

Canvas APIを使ってお絵描き

A Pen by tetsuro ebata on CodePen.

License.

index.html

  <div class="options">
    <p>色</p>
    <input type="text" id="color">
    <p>太さ</p>
    <input type="text" id="weight">
  </div>
  <p><input type="button" value="Canvasクリア" id="clear"></p>
  <canvas id="canvas" width="800" height="400"></canvas>

script.js

$(function(){
  var canvas = $('#canvas');
  var context = canvas[0].getContext('2d');

  canvas.on('mousemove', function(e){
    if(e.buttons === 1){
      var
        x = e.pageX - canvas.offset().left,
        y = e.pageY - canvas.offset().top,
        color = $('#color').val() || '#000',
        weight = $('#weight').val() || 10;

      context.fillStyle = color;
      context.fillRect(x, y, weight, weight);
    }
  });

  $('#clear').on('click', function(){
    context.clearRect(0,0,800,400);
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

.options{
  margin-bottom: 20px;
}
#canvas{
  border: 2px solid #ccc;
}