Posted on Aug 27 • Originally published at skdev.cc One of my favorite charting libraries, chart.js is built around the Canvas,The goat of ML and Deep learning tensorflow.js, can use webgl for computation, which is faster than both the CPU and WebAssembly.Guess what, the canvas API provides a webgl context:All this is usually reserved for lower level languages, it's undeniable the browser is powerful,made even more by web API's,granting us lower level acess and control,We can animate, do game graphics/engine, physics simulation, data visualization, photo-manipulation, real-time video processing etc etcall with the canvas.This article will explore one of those possibilities, pixel by pixel image manipulation.A book on the power of the canvas and potential applications can span 1000's of pages,We will cover only the necessary basics,create a new project folder, with the following structure:Copy and Paste the below HTML starter:Clone the repo to access the image files, which are optional you can use your own:Navigate to app.js, it is always advisable to listen for the content loaded event before any operation:We are getting a reference to the canvas, and from the canvas the 2d context,giving us an API for drawing 2d graphics onto the canvas,for example let's draw a simple square in the middle:The canvas API is imperative, we have to provide every instruction, as compared to declarative programmingWe are first telling the context, the color to use from now on, meaning anything we drawn under ctx.fillStyle = "green" will be filled or styled with green,for example to draw a yellow square after the green, we have to explicitly specifyThe canvas provides a coordinate system with the top left being (0, 0), going to the right on the x axis is +n, to left -n,n being a number of pixels.The y axis is flipped, +n goes down and -n goes up.Graphics Coordinate System and Units examplefor example the fillRect, takes coordinates(x, y), width(w) and height(h)We can draw all sorts of complex shapes, using the canvas, consult this article for more basics.It will be an injustice, to not show the potential of the canvas with a complex example,One of my favorite books I read as beginner, was Dan's The Nature of Code book, originally written in Java,JavaScript p5 versionI translated most of it directly to the canvas API, and I will be posting articles related to it, in some form in the near future,graphics programming is fun.The example below is comprised of content spanning over 148 pages of the nature of code,to make it easier I created a simple npm package for education purposes,in the same folder initialize a package.json file:and install the package:It only has two classes: Vector and Mover, the first for vector math and the latter a physics object.create a new script under src particles.js and comment out app.js and the image for now:copy and paste the following in particles.js:Use parcel to bundle and run:The code below is creating a physics object,bound by physical laws(nature) e.g wind, gravity etc,The mover object can respond/simulate to these lawsparams:Mover(mass, x, y, lifespan, color, canvas)the update function, applys gravity and wind to the mover object on every tick:check for bounds and commit calculations:You can play with forces, for example making the wind stronger:Change the direction etc;The canvas can do more and beyond, on top of being fun, we will certainly explore all of this in upcoming articles.Now let's move on to the issue at hand,let's go back to app.jsComment out the lines creating squares, we need the canvas and the context for image manipulationFirst we need to turn our image to pixel data, we can load the image into the canvas from the image tag,but for this tutorial the will serve as a prop or preview only, we will create a new Image in JS with:This article will be followed by a chrome extension version where we take this Image editor and combine it with Optical Character Recognition(OCR), to extract text in images.You can find the OCR part of the tutorial on dev.to, It's a only a 4 minute read,In the extension the editor will allow users to enhance the image, for better text extraction by the OCR engine.Here is the entire code to load the image, before we implement the function to paint into the canvas:the drawImageOnCanvas will put the image into the canvas, turning it into pixel datacreate a new file in the src directory imageEdit.js and export the following function:The image size may not be the same size as the canvas, an image can be for example 3000 * 2400 pixels, we cannot fit that onto a screen,the first few lines handle that, by scaling the image down, to change the scale of the image tweak the 400 value, in the scale variable const scale = 400 / maxSide;The following function is responsible for turning the image to pixel data, which we need formanipulation:Taking as params the image, x, y and size.let's look at the pixel dataTo get the pixel data from the canvas we use getImageData:which returns an object, with a property data, a one dimensional array containing the pixel data:Now a pixel is made up of four values rgba(red, green, blue and alpha), meaning when we process the array we stride by 4,in simple terms the data only makes sense if we process the values, four at a time:which forms the repetition of rbga, we will talk about data representation in the upcoming ML in JavaScript series.for example to print the first pixelThe second pixel we move by four.Let's create a grayscale function:To get the grayscale value of a pixel, we get the average of the pixel's color space,To know how much to darken it:after we get the average we darken rgb while preserving the alpha value:we do this for all the pixels in the image, from top to bottom, when the process is completewe draw the image back to the canvasLet's test it out by importing the grayscale function into app.jswe will take a programmatic approach for this article, only focusing on functionalitywe will worry about the UI for the extension partThe image should appear darker, another thing we can do is isolate color channels by turning off the unwantedby turning, we set their values to 0, navigate to imageEdit.js:the above turns off blue, you can uncomment out any, you will see the difference,How about putting a tint color on all the pixels:We can keep going there's a lot we can do with a pixel space: rotate, scale, compress etc,This example is enough for our purpose, to test this import the tint and color channel functions in app jsTesting tint:Isolating color channels:You can modify colorChanel to accept a switch case, on what channels to isolate,After all this is done we need a way to save our modified image into an actual image(png/jpg etc)The canvas provides a convenient method for that:The first param is the type and second the quality, 1.0 being the highestlet's replace the preview image with edited one:After 2 seconds the edited image should be the preview:We can add more functionality like scale, rotate etc, more complex but easy to google, to avoid a long blogWe will pause here, until we pick this up for the OCR chrome extension.In this article we looked at image manipulation using the canvasWhich allows us to turn an image to pixel data, in preparation for the combined image editor and OCR chrome extension.Thanks for reading, please let me know your thoughts and any ideas or questions in the comments. Oh and don't forget to give this article a ❤ and a 🦄, it really does help and is appreciated!You can connect with me on twitter, I am new!and if you like concise content, I will be posting fuller articles and projects on my site skdev, as they do not make good blogging content, be sure to check it out!Articles on Machine Learning, Desktop development, Backend, Tools etc for the web with JavaScript, Golang and Python.Templates let you quickly answer FAQs or store snippets for re-use.A quick way to download the image(bonus):An article on downloading blobs -> here Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Composite - Aug 18 Dgibson89 - Aug 8 Sospeter Mongare - Aug 4 Kittisak Ma - Aug 23 Once suspended, sfundomhlungu will not be able to comment or publish posts until their suspension is removed. Once unsuspended, sfundomhlungu will be able to comment and publish posts again. Once unpublished, all posts by sfundomhlungu will become hidden and only accessible to themselves. If sfundomhlungu is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to sk. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag sfundomhlungu: sfundomhlungu consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging sfundomhlungu will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.