Get the canvas object while using fabric js

I'm using Fabric.js and I've created a fabric canvas object at one place.

var x = new fabric.Canvas("mycanvas");

Now at another place, I want to access this object where 'x' won't be available. So how can I get the same fabric canvas object.

I don't wanna change the scope of x or pass x as arg.

Also, how to get the toDataURL from the fabric canvas object?

-----------------If you don't make the reference available, it won't be able to be accessed. That's how scope works. – alex

18down voteaccepted

Assuming that mycanvas is the ID of a Canvas element, you could store the reference to the fabric object on the Canvas element itself:

var x = new fabric.Canvas("mycanvas");
document.getElementById("mycanvas").fabric = x;

You can then retrieve that object any time you want with:

var y = document.getElementById("mycanvas").fabric;
var url = y.toDataURL("png", 1);
answered Nov 2 '12 at 12:47
Alnitak

252k54316396
 

fabricJs使用系列(一)的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新

    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  6. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

随机推荐

  1. tkinter学习-选择按钮

    阅读目录 Checkbutton Radiobutton LabelFrame checkbutton : 说明:多选框控件,用于在程序中提供多项选择框,但是处理“多选一”的问题,还是交给 Radio ...

  2. 刚毕业去面试Python工程师,这几道题太难了,Python面试题No11

    写在前面 本想停一段时间这个系列,但是好多朋友给我发信息说让我继续整理下去,so,继续吧~ 第1题: docstring是什么? docstring是一种文档字符串,用于解释构造的作用.我们在函数.类 ...

  3. 阀值化 threshold

    OpenCV中的阈值(threshold)函数: threshold 的运用. C++: double threshold(InputArray src, OutputArray dst, doubl ...

  4. cf891a Pride

    倘若存在 1,那么答案是 \(n-cnt_1\). 否则,设最短的公约数为 1 的区间长度为 \(minlen\),答案是 \(minlen-1+n-1\). #include <iostrea ...

  5. [转]构建Python+Selenium2自动化测试环境(二)

    构建Python+Selenium2自动化测试环境完成之后,就需要测试支持python的selenium的版本是否都支持在不同浏览器上运行,当前我们分别在三个最通用的浏览器上通过脚本来测试. 1.在I ...

  6. Matplotlib基本图形之直方图

    Matplotlib基本图形之直方图 直方图特点 由一系列高度不等的纵向条形组成,表示数据分布情况例如年级同学身高分布注意与条形图的区别 示例代码: import osimport numpy as ...

  7. 循环神经网络与LSTM网络

    循环神经网络与LSTM网络 循环神经网络RNN 循环神经网络广泛地应用在序列数据上面,如自然语言,语音和其他的序列数据上.序列数据是有很强的次序关系,比如自然语言.通过深度学习关于序列数据的算法要比两 ...

  8. [BZOJ3339] Rmq Problem(线段树)

    传送门 这个题的方法好像很多啊 1.莫队暴力 2.线段树 + 离线处理 先预处理出sg[i]表示前i个数的sg值,next[i]表示i的下一位置在哪里,如果后面再没有i,那么next[i] = n + ...

  9. 转载:lua和c的交互

    extern "C" { #include "lua.h" #include "lualib.h" #include "lauxl ...

  10. Linux(7):用户管理

    用户管理 让一个脚本或命令开机自启动的方法: # 方法一: 把脚本放到 /etc/rc.local 中 # 方法二: 把脚本或命令通过 chkconfig 管理 # 如何让一个脚本被 chkconfi ...