So, news has it that the next Windows 10 update known as ‘Autumn’ will bring a lot of new features, but will also bid goodbye to Microsoft Paint. For those who first dabbled with computers in 90s, it leaves us with a lot of childhood memories of Paint.Īfter 32 years, Microsoft has decided to pull the plug on Paint. However you'll find that this method is much faster.Update: Microsoft has confirmed that Paint will be available as a free standalone app (Paint 3D app) on Windows store those who still want to use it.Īll good things come to an end, and so does Microsoft Paint. Of course, you'll need to play around with the sizes of the grid to match what you want. Var DOMURL = window.URL || window.webkitURL || window Var canvas = document.getElementById(id) I did not test these out, so I don't know how much of a speed boost they provide (if any). Get a single image that is the portion of a grip, then copy pasta that image around the area you need.Render it as SVG (Quill has already shown this).As Quill has already shown, there are other options: Yes, the way you are currently forming the grid is very slow.

Why not just use the canvas that you literally just defined? Then, you use the ctx to get the canvas again by accessing its properties. First, you use the canvas to get the ctx. var canvas = document.getElementById(id) Then, go ask the context where the canvas is. Assuming more drawing will take place in this code, why not put both the canvas and the context in a global scope? There is no point in finding the context, putting it in a variable, and then destroying it at the end of the function every time it is called.Īsk the canvas where the context is. This is created every time your function is called. This could also speed up your code by a lot if used correctly.įor more on why it's bad practice, think about it this way: if you need to do some specific checking on an element after you've found it before you are ready to give it to the function, how are you supposed to pass that prepared element to the function?ĭon't let the function worry about how to get what it needs just give it what it needs.įetch me the context! Now throw it away! var ctx = canvas.getContext('2d') Instead, you should pass the DOM element itself. Your drawGrid function takes the id of a DOM element that the function is expected to find on its own. Quill already did a good job speeding up your code, so I'll focus on the code you have right now.

Ms paint 3d grid lines