HTML5 canvas basics

context2d

context3d

sometimes svg is better for the job

beware of UI

HTML5 canvas is a powerful element that allows you to dynamically create and manipulate graphics using JavaScript. It provides a drawing surface on which you can draw shapes, lines, text, and images.

To use the canvas element, you need to first create it in your HTML document with the <canvas> tag, like so:

1. <canvas id="myCanvas" width="500" height="500"></canvas>

This creates a canvas with an ID of "myCanvas" and sets its width and height to 500 pixels each.

To start drawing on the canvas, you need to get a reference to its context object, which provides methods for drawing on the canvas. You can get the context object using the getContext() method of the canvas element, like so:

1. const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d");

The above code gets a reference to the canvas element with an ID of "myCanvas" and gets its 2D context object. The getContext() method takes a string argument that specifies the type of context to get, in this case "2d" for a 2D context.

Now that you have the context object, you can use its methods to draw on the canvas. Here are some basic examples:

1. // Draw a line from (0,0) to (100,100) ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100, 100); ctx.stroke(); // Draw a red rectangle ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); // Draw text ctx.fillStyle = "black"; ctx.font = "30px Arial"; ctx.fillText("Hello, world!", 50, 150); // Draw an image const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "myImage.png";

In the first example, we draw a line by starting a new path with beginPath(), moving the pen to (0,0) with moveTo(), drawing a line to (100,100) with lineTo(), and stroking the path with stroke().

In the second example, we fill a rectangle with red using fillRect().

In the third example, we draw text with fillText(), specifying the text, font size, and position.

In the fourth example, we draw an image by creating a new Image object, setting its onload handler to wait for the image to load, and then drawing it on the canvas with drawImage().

Music

I can't imagine myself working without headphones, I wear them all the time while working and I'm working all the time :-) At home I use good old Koss Porta Pro, in my office I have Creative Fatal1ty HS-800.

I'm satisfied with both, Fatal1ty has more basses and were little tight when new, causing a minor headache, but I suppose I like them more. Porta Pro are proven by many and the only bad thing is the foam covers wears out every couple of years.

Koss Porta Pro and Creative Fatal1ty HS-800

I mostly listen to classical and relaxation music, or on-line NYC based radio. The radio is especially nice thanks to the time difference - in the morning (my local time) there are no commercials, because it's night over there, then the great morning show comes and after that they have few hours commercial-free, which concludes my usual work day.

I use music as a distraction barrier, so sometimes I listen to a single track over and over again. My personal favorite is a MIDI track from a 90's adventure game, spiced up by a great sound font. But I have other favorite tracks I'm playing frequently.

Type Helpers

Starting with PHP 7, a lot of things in PHP moved towards more mature programming language. But what probably will remain for a long time is function inconsistency, argument-wise.

String functions are often [haystack,needle] or [string,param], whilst array functions are often the other way around - [needle,haystack] or [param,array]. I wrote “often”, because sometimes it's not the case. What a mess!

So I decided to provide common type classes with unified order and pull some functions from Util class, where they didn't belong in the first place. I agree a need for Util classes often means wrong class architecture.

Those classes are QS, QN, QA, QD and QE for string, number, array, date and enum functions/methods. They will be optional and usage will be encouraged for creating custom modules for custom projects. The core won't need them, so if you're familiar with PHP functions, those classes won't add anything into the compiler.

They are just helpers and you may use them only for what PHP is the best in – hack something working together in an hour :-)

In JS Framework there is one extra class QC, helping with components and elements.