canvas

Description
Syntax
Examples
Links

Description

The canvas element for HTML provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

Syntax

HTML

<canvas attribute-name="attribute-value"></canvas>

Attributes

Global

Name	Value	Description
height	non-negative integer	Vertical dimension
width	non-negative integer	Horizontal dimension

<!doctype html>
<html>
<head>
    <style>
        canvas
        {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas>fallback content for browsers that do not support the canvas element</canvas>
    <script>
        const canvas = document.querySelector("canvas");
        const context = canvas.getContext("2d");

function myfunction(text, x = 0, y = 0)
        {
            context.clearRect(0, 0, canvas.width, canvas.height);

context.font = "100px cursive";
            context.textBaseline = "top";

const metrics = context.measureText(text);
            console.log(metrics);

context.fillStyle = "rgb(255 255 255 / 0.25)";
            context.fillRect(
                x - metrics.actualBoundingBoxLeft,
                y - metrics.actualBoundingBoxAscent,
                metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight,
                metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
            );

context.fillStyle = "rgb(255 255 255 / 0.75)";
            context.fillText(
                text,
                x,
                y
            );
        }
        myfunction("hi", 25, 50);
        myfunction("hello", 50, 25);
        myfunction("text");
    </script>
</body>
</html>

Overview

Search

Download

العربية

česky

Dansk

Deutsch

English

Español

Suomi

Français

Magyar

Bahasa Indonesia

Italiano

日本語

Malagasy

te reo Māori

한국어

Nederlands

Norsk

Polski

Português

Română

Pyccкий

Shqip

Svenska

Wikang Tagalog

українська

Tiếng Việt

简体中文

繁體中文

Overview

Attributes

Elements

Other

Overview

Functions

Properties

Pseudo-Classes

Pseudo-Elements

Units

Overview

AbortController

AbstractRange

AbortSignal

ChildNode

Comment

console

CustomEvent

Declarations

Document

DocumentFragment

DocumentOrShadowRoot

DOMImplementation

DOMStringList

DOMTokenList

Element

Event

EventTarget

HTMLAllCollection

HTMLBaseElement

HTMLCollection

HTMLDialogElement

HTMLElement

HTMLFormControlsCollection

HTMLLinkElement

HTMLOptionsCollection

HTMLOrSVGElement

HTMLVideoElement

Iterations

Location

MutationObserver

MutationRecord

Node

NodeList

NonDocumentTypeChildNode

NonElementParentNode

ParentNode

Prompts

RadioNodeList