0
226
ViewsHow to position my image on a canvas by positioning
I want to draw my image to the following anchored positions. How can I achieve this with Context2d::drawImage()? I purposefully placed it (0,0) btw.
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: -10
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext('2d');
ctx.save();
ctx.canvas.width = 160;
ctx.canvas.height = 432;
ctx.font = "18px Ubuntu";
ctx.textAlign = "center";
ctx.fillStyle = "#000000"
const centerX = 10;
const centerY = ctx.canvas.height / 2;
const angle = Math.PI;
const radius = 130
ctx.fillStyle = "#000000"
ctx.restore();
ctx.save();
ctx.drawImage(abcBar, 0, 0, abcBar.width, abcBar.height);
console.log('loaded')
ctx.restore();
}
·
Juan Pablo Isaza
1 answers
Answer question0
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source"
src="https://picsum.photos/200"
width="220" height="277">
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
image.addEventListener('load', e => {
//ctx.drawImage(image, 0, 0);
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
//The source image is taken from the coordinates (33, 71), with a width of 104
//and a height of 124. It is drawn to the canvas at (21, 20), where it is given
//width of 87 and a height of 104.
});
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question