html修改图片宽度高度,如何根据图片的大小设置html5画布的图像宽度和高度？

我有以下代码。

它从数据库中获取一些base64编码的图片，并在html5画布中显示在屏幕上。

$sql = "SELECT * FROM editor_picture";

$rs = $db->GetAssoc($sql); //Getting the result in an array

$rs_array = array_values($rs);

$count_files = count($rs_array);

?>

`

var canvas<?php echo $x; ?> = document.getElementById('canvas<?php echo $x; ?>');

var context<?php echo $x; ?> = canvas<?php echo $x; ?>.getContext('2d');

var img<?php echo $x; ?> = new Image();

img<?php echo $x; ?>.onload = function () {

context<?php echo $x; ?>.drawImage(this, 0, 0, img<?php echo $x; ?>.width, img<?php echo $x; ?>.height);

}

//$rs_array[$x]['editor_picture_use_base64'] contains the base64 encoded string

img<?php echo $x; ?>.src = "<?php echo str_replace(' ', '+', $rs_array[$x]['editor_picture_use_base64']); ?>";

for ($x = 0; $x < $count_files; $x++) {

?>

}

?>

它有效，但由于图片尺寸不同，我无法手动设置画布的width =“”height =“”

我的问题是：

如何设置html5 camvas的图像宽度和高度，使其符合图片的大小？

我更喜欢使用原生Javascript。但任何解决方案都可以。