使用鼠标事件进行绘制时，矩形未显示在画布中

Question

I'm trying to draw a rectangle with mouse events, it seems to work, I've used console.log in all my code to see what is happening, and is all running nice, but the rectangle just dislikes me I think, it doesn't appear!

I can't figure out how to find the mistake!

I only want a direction, thank you for your time.

Fiddle here.

And the code here:

$("body").wrapInner("<canvas id='myCanvas'>");
var canvas = $("#myCanvas").css("cursor", "crosshair");
var context = canvas[0].getContext("2d");
var div = {x:0, y:0};
var draw_rectangle = function(e){
    context.fillRect (
        div.x, div.y,
        (e.pageX - div.x),
        (e.pageY - div.y)
    );
};
context.fillStyle = "#aaf";
canvas.on("mousedown", function(e){
    div.x = e.pageX;
    div.y = e.pageY;
    canvas.on("mousemove", draw_rectangle);
});
canvas.on("mouseup", function(){
    canvas.off("mousemove");
    console.log("Drawed.");
});

Answer 1

The thing is, that the css properties``height and width are problematic with canvas elements, because they stretch your canvas element to fit the given size - stretching the canvas' bitmap. The html properties height and width on the other hand determine the size of your canvas' bitmap.

So, a solution in your case would be, to change your code to the following:

 $("body").wrapInner("<canvas id='myCanvas'>"); $('#myCanvas').attr("width", 400); $('#myCanvas').attr("height", 500); var canvas = $("#myCanvas").css("cursor", "crosshair"); var context = canvas[0].getContext("2d"); var div = {x:0, y:0}; var draw_rectangle = function(e){ context.fillRect ( div.x, div.y, (e.pageX - div.x), (e.pageY - div.y) ); }; context.fillStyle = "#aaf"; canvas.on("mousedown", function(e){ div.x = e.pageX; div.y = e.pageY; canvas.on("mousemove", draw_rectangle); }); canvas.on("mouseup", function(){ canvas.off("mousemove"); console.log("Drawed."); }); 

 canvas { background-color: rgba(0, 0, 0, 0.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Information Source: Canvas is stretched when using CSS but normal with "width" / "height" properties