Get pixel color from canvas with HTML

To get the pixel color from canvas, use the following code. This returns the color in rgba −

var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4

// color in rgba
var r = data[index]
var g = data[index + 1]
var b = data[index + 2]
var a = data[index + 3]

Arjun Thakur

Updated on 04-Mar-2020 06:30:51

• Related Questions & Answers
• How to get the pixel depth and color depth of a screen in JavaScript?
• HTML canvas Tag
• HTML Canvas Basics
• How do I get the background color of a Tkinter Canvas widget?
• Draw a circle filled with random color squares on HTML5 canvas
• How to create a canvas with a background color using FabricJS?
• HTML canvas strokeStyle Property
• HTML canvas strokeRect() Method
• HTML canvas clearRect() Method
• HTML canvas fill() Method
• HTML canvas fillRect() Method
• HTML canvas fillStyle Property
• HTML canvas rect() Method
• HTML canvas shadowColor Property
• HTML canvas stroke() Method