HTML Canvas Tag

Örnek

Şöyle yaparız

<canvas id="canvas" width="300" height="300"></canvas>

Kullanmak için şöyle yaparız

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Create our image
let newImage = new Image();
newImage.src = 'https://fjolt.com/images/misc/202203281.png'

// When it loads
newImage.onload = () => {
    // Draw the image onto the context
    ctx.drawImage(newImage, 0, 0, 250, 208);
}

Açıklaması şöyle

When the image loads (newImage.onload), then we draw the image onto our canvas. To do that, we use ctx.drawImage(). The syntax is shown below.

ctx.drawImage(image, x, y, width, height)

If declared like this, ctx.drawImage() only has 5 arguments:

• image - the image we want to use, is generated from our new Image() constructor.
• x - the x position on the canvas for the top left corner of the image.
• y - the y position on the canvas for the top left corner of the image.
• width - the width of the image. If left blank, the original image width is used.
• height - the height of the image. If left blank, the original image height is used.

toDataURL metodu

İmzası şöyle

toDataURL(type, encoderOptions) has two arguments which lets us change the way the canvas is encoded. This lets us save files as other formats, such as jpg.

Those two arguments can be defined as follows:

• type, which is a filetype, in the format image/png.
• encoderOptions, which is a number between 0 and 1, defining the image quality. This is only supported by file formats that have lossy compression, like webp or jpg.

Örnek

Şöyle yaparız

// Convert our canvas to a data URL
let canvasUrl = canvas.toDataURL("image/jpeg", 0.5);
console.log(canvasUrl);

// Outputs 
// "data:image/jpeg;base64,/9j/...

Örnek

Şöyle yaparız

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Canvas code goes here 
// ...

document.getElementById('download').addEventListener('click', function(e) {
    // Convert our canvas to a data URL
    let canvasUrl = canvas.toDataURL();
    // Create an anchor, and set the href value to our data URL
    const createEl = document.createElement('a');
    createEl.href = canvasUrl;

    // This is the name of our downloaded file
    createEl.download = "download-this-canvas";

    // Click the download button, causing a download, and then remove it
    createEl.click();
    createEl.remove();
});

TypeScript Temel Tipler

Giriş

Açıklaması şöyle

... below is a list the most fundamental TypeScript types you will see the most:

undefined - when something is not defined in the code, or does not exist.

any - refers to any type - essentially not enforcing a type at all.

enum - an enum - see here for more on enums.

number - a number between -2^53 - 1 and 2^53 - 1, i.e. 1.

string - a combination of characters i.e. test.

boolean - true or false.

bigint - a number bigger than 253 - 1.

symbol - a completely unique identifier.

function - self-explanatory - a function.

object - an object or array

never - used in functions - for when a function never returns a value, and only throws an error.

void - used in functions - for when a function never returns a value.

Örnek
Şöyle yaparız

subject: string = "abc";