Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
120
rated 0 times [  126] [ 6]  / answers: 1 / hits: 34694  / 11 Years ago, mon, may 13, 2013, 12:00:00

I'm building a few libraries for canvas graphing in javascript, and I was wondering if there was any way to get the size of the canvas from it's 2D context. I was looking for something like this.



var size=ctx.size;
scale=size/100;


There are multiple canvas elements here, so I can't do canvas.width.

Thanks


More From » canvas

 Answers
1

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

[#78255] Sunday, May 12, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
neildrews

Total Points: 166
Total Questions: 103
Total Answers: 85

Location: Moldova
Member since Sat, Aug 6, 2022
2 Years ago
neildrews questions
Fri, Feb 18, 22, 00:00, 2 Years ago
Tue, Oct 12, 21, 00:00, 3 Years ago
Tue, Mar 23, 21, 00:00, 3 Years ago
Sun, Aug 16, 20, 00:00, 4 Years ago
;