Don't draw points outside chartArea (#9443)

src/elements/element.point.js

@@ -1,5 +1,5 @@
 import Element from '../core/core.element';
-import {drawPoint} from '../helpers/helpers.canvas';
+import {drawPoint, _isPointInArea} from '../helpers/helpers.canvas';
 
 function inRange(el, pos, axis, useFinalPosition) {
   const options = el.options;
@@ -50,11 +50,11 @@ export default class PointElement extends Element {
     return (radius + borderWidth) * 2;
   }
 
-  draw(ctx) {
+  draw(ctx, area) {
     const me = this;
     const options = me.options;
 
-    if (me.skip || options.radius < 0.1) {
+    if (me.skip || options.radius < 0.1 || !_isPointInArea(me, area, me.size(options) / 2)) {
       return;
     }
 

src/helpers/helpers.canvas.js

@@ -251,7 +251,7 @@ export function drawPoint(ctx, options, x, y) {
 export function _isPointInArea(point, area, margin) {
   margin = margin || 0.5; // margin - default is to match rounded decimals
 
-  return point && point.x > area.left - margin && point.x < area.right + margin &&
+  return point && area && point.x > area.left - margin && point.x < area.right + margin &&
 		point.y > area.top - margin && point.y < area.bottom + margin;
 }
 

test/fixtures/controller.line/clip/false.js

@@ -0,0 +1,46 @@
+const data = [];
+for (let x = 0.95; x < 1.15; x += 0.002) {
+  data.push({x, y: x});
+}
+
+for (let x = 0.95; x < 1.15; x += 0.001) {
+  data.push({x, y: 2.1 - x});
+}
+
+module.exports = {
+  config: {
+    type: 'scatter',
+    data: {
+      datasets: [{
+        clip: false,
+        radius: 8,
+        borderWidth: 0,
+        backgroundColor: (ctx) => ctx.type !== 'data' || ctx.raw.x < 1 || ctx.raw.x > 1.1 ? 'rgba(255,0,0,0.7)' : 'rgba(0,0,255,0.05)',
+        data
+      }]
+    },
+    options: {
+      plugins: false,
+      scales: {
+        x: {
+          min: 1,
+          max: 1.1
+        },
+        y: {
+          min: 1,
+          max: 1.1
+        },
+      },
+      layout: {
+        padding: 32
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 240,
+      width: 320
+    }
+  }
+};