javascript - Get canvas size from its context -


i'm building few libraries canvas graphing in javascript, , wondering if there way size of canvas it's 2d context. looking this.

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

there multiple canvas elements here, can't canvas.width.
thanks

yes can. it's bit deeper might used to;

var sizewidth = ctx.canvas.clientwidth; var sizeheight = ctx.canvas.clientheight;  var scalewidth = sizewidth/100; var scaleheight = sizeheight/100;

a common example of 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 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

Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db : ...
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite...
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle); ...
Read more