Menu
You can get the width and height of a canvas element simply by accessing those properties of the element. For example: var canvas = document. getElementById('mycanvas'); var width = canvas.
scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically. By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior.
getContext() The HTMLCanvasElement. getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.
Yes you can. It's a bit deeper than you might be used to;
var sizeWidth = ctx.canvas.clientWidth;
var sizeHeight = ctx.canvas.clientHeight;
var scaleWidth = sizeWidth/100;
var scaleHeight = sizeHeight/100;
A common example of the Canvas context object;
> CanvasRenderingContext2D
canvas: HTMLCanvasElement
constructor: CanvasRenderingContext2DConstructor
fillStyle: "#000000"
font: "10px sans-serif"
globalAlpha: 1
globalCompositeOperation: "source-over"
lineCap: "butt"
lineJoin: "miter"
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: "rgba(0, 0, 0, 0)"
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: "#000000"
textAlign: "start"
textBaseline: "alphabetic"
webkitBackingStorePixelRatio: 1
webkitLineDash: Array[0]
webkitLineDashOffset: 0
__proto__: CanvasRenderingContext2DPrototype
And the HTMLCanvasElement inside it;
> canvas: HTMLCanvasElement
accessKey: ""
attributes: NamedNodeMap
baseURI: "http://fiddle.jshell.net/_display/"
childElementCount: 0
childNodes: NodeList[0]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 150
clientLeft: 1
clientTop: 1
clientWidth: 300
constructor: HTMLCanvasElementConstructor
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: null
firstElementChild: null
height: 150
hidden: false
id: "c1"
innerHTML: ""
innerText: ""
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "canvas"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: HTMLCanvasElement
nextSibling: Text
nodeName: "CANVAS"
nodeType: 1
nodeValue: null
offsetHeight: 152
offsetLeft: 8
offsetParent: HTMLBodyElement
offsetTop: 8
offsetWidth: 302
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
outerHTML: "<canvas id="c1"></canvas>"
outerText: ""
ownerDocument: HTMLDocument
parentElement: HTMLBodyElement
parentNode: HTMLBodyElement
prefix: null
previousElementSibling: null
previousSibling: Text
scrollHeight: 150
scrollLeft: 0
scrollTop: 0
scrollWidth: 300
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "CANVAS"
textContent: ""
title: ""
translate: true
webkitRegionOverflow: "undefined"
webkitdropzone: ""
width: 300
__proto__: HTMLCanvasElementPrototype
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With