Why is drawing a picture on canvas much larger than the set size?

original image size: 750x1334
canvas size: 750X1334
I"m going to lay a 750x1334 picture as the background on the canvas of 750x1334.

the code is as follows:

 var image = new Image()
  image.src = "/img/background.png"
  image.onload = drawImg // 
  function drawImg () {
context.drawImage(image, 0, 0, 750, 1334)
  }

canvas:

<canvas id="share" canvas-id="share" style="width:750px;height:1334px;">
</canvas>

the result looks like this. The picture on the left is canvas, and the picture on the right is the img of the original image as a comparison, 750x1334, that is, the last effect I want to draw

the picture has been stretched a lot. Why?

Canvas html5 javascript

Jan.18,2022

<canvas id='share' canvas-id='share' width="750" height="1334" style='width:750px;height:1334px;'>
</canvas>

The size of

canvas is not set by style, and the two widths and heights are two different things.

look at you saying that 750x1334 should be for H5 drawing. If you add your dynamic adaptation and open it in the browser to simulate the mobile phone window, it is a drawn picture
but your canvas tag itself is a canvas. I made a Wechat share, front-end drawing, and I posted the code to you. I hope it will be helpful to you

var canvas = document.createElement('canvas');
        canvas.width = 750;
        canvas.height = 1206;
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            var img_left = new Image();

            img_left.onload = function () {
                var img_ewm = new Image();
                img_ewm.onload=function(){
                    ctx.font = "24px ";
                ctx.drawImage(img, 0, 0);
                ctx.drawImage(img_left, 310, 160, 115, 115);
                ctx.drawImage(img_ewm, 310, 925, 115, 115);
                ctx.fillStyle = "-sharp773f15";
                ctx.textAlign = 'center';
                ctx.fillText('??', 375, 138);
                //$('body').html(canvas);
                $('.imageShare').attr('src', canvas.toDataURL("image/jpeg"))
                }
                img_ewm.src='./ewm.png';
                img_ewm.crossOrigin = 'anonymous';
                
            }
            img_left.src = "./132.jpeg"
            img_left.crossOrigin = "anonymous";
        }
        img.src = './result2.jpg';
        img.crossOrigin = "anonymous";

pay attention to canvas drawing. Pictures may have cross-domain problems, resulting in unable to generate pictures, so you need to configure the same origin

Previous: There was a mistake when traversing the picture file with os's join

Next: Vue picture swipe left and right to switch

How to move the entire queue and depict it with canvas.
to complete the following effect diagram, the move: method cannot achieve the desired automatic movement at the speed shift 2, . ...

Canvas html5 javascript

Feb.28,2021
The rubber sassafras function is realized on the canvas background image without destroying the background image.
and then realize the painting function on the canvas of the background map, such as drawing a circle and so on. I want to make a rubber Sassafras function, which can remove part of the circle without affecting the background image. How can this be realiz...

Canvas html5 javascript

Feb.28,2021
How do you achieve a particle effect like this?
first post the link https: www.hotsarstore.com home like the effect of the home page, 1, mouse skimming and so on to show 2, hair effect? How to describe 3, Light and Shadow Movement Please ...

Canvas html5 javascript

Mar.25,2021
Can canvas move the picture directly without clearing the canvas?
online check seems to be through the removal of the canvas, re-painted, so can you directly move without cleaning the previous canvas. ...

Canvas html5 javascript

Mar.30,2021
A js graphic Segmentation algorithm
it is known that a polygon consists of n squares of the same size (this polygon is not necessarily a rectangle, but it must be a figure made up of squares). To cut this figure, you can only cut from the edge of each square. When you click submit, you can...

Algorithm canvas html5 javascript

Jan.20,2022
How can I tell that the picture drawn in canvas has been loaded?
The scenario goes like this: generate a poster with canvas. Click the button to start drawing the poster, which contains a background image , and a pop-up window that converts the painted canvas into a picture and displays it in the pop-up window. the...

Canvas html5 javascript vue.js

Feb.03,2022

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3129c-4e9d7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3129c-4e9d7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?