• Home
  • Whiteboard
  • Online Compilers
  • Practice
  • Articles
  • AI Assistant
  • Jobs
  • Tools
  • Corporate Training
  • Courses
  • Certifications
Login
    • Java
    • JSP
    • iOS
    • HTML
    • Android
    • Python
    • C Programming
    • C++ Programming
    • C#
    • PHP
    • CSS
    • Javascript
    • jQuery
    • SAP
    • SAP HANA
    • Data Structure
    • RDBMS
    • MySQL
    • Mathematics
    • 8085 Microprocessor
    • Operating System
    • Digital Electronics
    • Analysis of Algorithms
    • Mobile Development
    • Front End
    • Web Development
    • Selenium
    • MongoDB
    • Computer Network
    • General Topics
  • Library
  • Courses
  • Certifications
  • Login
  • SQL
  • HTML
  • CSS
  • Javascript
  • Python
  • Java
  • C
  • C++
  • PHP
  • Scala
  • C#
  • Tailwind CSS
  • Node.js
  • MySQL
  • MongoDB
  • PL/SQL
  • Swift
  • Bootstrap
  • R
  • Machine Learning
  • Blockchain
  • Angular
  • React Native
  • Computer Fundamentals
  • Compiler Design
  • Operating System
  • Data Structure and Algorithms
  • Computer Network
  • DBMS
  • Excel
Technical Questions and Answers
  • Data Structure Data Structure
  • Networking Networking
  • RDBMS RDBMS
  • Operating System Operating System
  • Java Java
  • MS Excel MS Excel
  • iOS iOS
  • HTML HTML
  • CSS CSS
  • Android Android
  • Python Python
  • C Programming C Programming
  • C++ C++
  • C# C#
  • MongoDB MongoDB
  • MySQL MySQL
  • Javascript Javascript
  • PHP PHP
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary
  • Who is Who

Get Pixel Color from Canvas with HTML

HTMLWeb DevelopmentFront End Technology


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
Arjun Thakur

Updated on: 2020-03-04T06:30:51+05:30

319 Views

  • Related Articles
  • How to get the pixel depth and color depth of a screen in JavaScript?
  • How do I get the background color of a Tkinter Canvas widget?
  • 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
  • HTML canvas shadowOffsetY Property
  • HTML canvas shadowBlur Property
  • HTML Color Styles
  • Draw a circle filled with random color squares on HTML5 canvas
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements
TOP TUTORIALS
  • Python Tutorial
  • Java Tutorial
  • C++ Tutorial
  • C Programming Tutorial
  • C# Tutorial
  • PHP Tutorial
  • R Tutorial
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial
  • SQL Tutorial
TRENDING TECHNOLOGIES
  • Cloud Computing Tutorial
  • Amazon Web Services Tutorial
  • Microsoft Azure Tutorial
  • Git Tutorial
  • Ethical Hacking Tutorial
  • Docker Tutorial
  • Kubernetes Tutorial
  • DSA Tutorial
  • Spring Boot Tutorial
  • SDLC Tutorial
  • Unix Tutorial
CERTIFICATIONS
  • Business Analytics Certification
  • Java & Spring Boot Advanced Certification
  • Data Science Advanced Certification
  • Cloud Computing And DevOps
  • Advanced Certification In Business Analytics
  • Artificial Intelligence And Machine Learning
  • DevOps Certification
  • Game Development Certification
  • Front-End Developer Certification
  • AWS Certification Training
  • Python Programming Certification
COMPILERS & EDITORS
  • Online Java Compiler
  • Online Python Compiler
  • Online Golang Compiler
  • Online C Compiler
  • Online C++ Compiler
  • Online C# Compiler
  • Online PHP Compiler
  • Online MATLAB Compiler
  • Online Bash Compiler
  • Online SQL Compiler
  • Online Html Editor
  • ABOUT US |
  • OUR TEAM |
  • CAREERS |
  • JOBS |
  • CONTACT US |
  • TERMS OF USE |
  • PRIVACY POLICY |
  • REFUND POLICY |
  • COOKIES POLICY |
  • FAQ'S
tutorials point logo

Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.

© Copyright 2025. All Rights Reserved.