[BUG] Incorrect position of image when using with pointBackgroundColor

Expected Behavior

The picture should start rendering from the left top position of the point and should fill up the point.

Current Behavior

The picture starts rendering from the centre of the point.

Possible Solution

I am not sure about where the problem is, but the following change worked for me.

Add the following line after https://github.com/chartjs/Chart.js/blob/master/src/helpers/helpers.canvas.js#L75

ctx.translate(-1 * radius, -1 * radius);

Steps to Reproduce (for bugs)

Here is a sample codepen that demonstrates the problem: https://codepen.io/anon/pen/aRgjwz

Context

I want to place the user avatars on the graph data points as can see in the expected behavior.

Environment

• Chart.js version: 2.7.3
• Browser name and version: Chrome [Version 70.0.3538.77 (Official Build) (64-bit)]
• Link to my project: https://codepen.io/anon/pen/aRgjwz

[nagix]

You may want to use chartjs-plugin-datalabels for text labels. You can also take the same approach as above like this.

tCtx.textAlign = "center";
tCtx.textBaseline = "middle"; 
tCtx.fillText("AB", 0, 0);
tCtx.fillText("AB", size, 0);
tCtx.fillText("AB", 0, size);
tCtx.fillText("AB", size, size);

var ctx = canvas.getContext("2d");
var fillStyle = ctx.createPattern(tempCanvas, "repeat");

[rajkumar-osm]

@nagix Thank you for the quick response.

I’ve tried pattern with offset and with repeat, now the picture seems to be aligned to the center, but it is not visible completely. Please check https://codepen.io/anon/pen/PxzYLj