Automattic / Automattic/node-canvas

drawImage not working as expected

Open
#2,226 0 comments 2 reactions 0 assignees View on GitHub
Bug
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue
I'm trying to reproduce this example https://jsfiddle.net/deap0g3u/4/ on node-canvas and it result in not drawing any part of the image. I believe that's something wrong with the last 4 arguments of drawImage, or how drawImage deals with some value resulting from the maths cause if you change the first draw function argument to something like 0.5, the image starts to show...

## Steps to Reproduce
```js
const { createCanvas, Image } = require('canvas');
const fs = require('fs');

const canvas = createCanvas(400,400);
const ctx = canvas.getContext('2d');
const image = new Image();

function draw(ang,tilt, perspective) {
ctx.fillStyle = "black"
ctx.fillRect(0,0,canvas.width,canvas.height);

const step = 1/image.width;
for(let i = 0; i < 1; i += step){
let a = i * Math.PI;
let a1 = (i+ step*2) * Math.PI ;
let ix = i * image.width*1.2;
let iw = step * image.width*1.2;
a += ang * Math.PI * 2;
a1 += ang * Math.PI * 2;
a = Math.PI -a;
a1 = Math.PI -a1;
let x = canvas.width * 0.5;
let y = canvas.height * 0.1;

let x1 = x + Math.cos(a1) * 110;
let y1 = y + Math.sin(a) * tilt;
x += Math.cos(a) * 110;
y += Math.sin(a) * tilt;
let s = Math.sin(a);
let s1 = Math.sin(a1);
if(s > 0 || s1 > 0){
ctx.drawImage(image,ix,0,iw,image.height,x1,y - (s * perspective*0.5),x-x1,200 + (s * perspective));
}
}

const buffer = canvas.toBuffer("image/png");
fs.writeFileSync("./image.png", buffer);
}

image.onload = () => {
draw(0.05, 40,30);
}

image.src = "https://thorntons-investments.co.uk/wp-content/uploads/2017/08/400x200.png";
```
The expected result here: https://jsfiddle.net/deap0g3u/4/

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): canvas@2.11.2
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v16.19.0 on Windows 11 (but the problem occurs on aws lambda Linux with node v16 too)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.