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. Spring中使用注解 @Scheduled 执行定时任务

    来自:http://blog.51cto.com/dwf07223/1557145 注解@Scheduled 可以作为一个触发源添加到一个方法中,例如,以下的方法将以一个固定延迟时间5秒钟调用一次执行 ...

  2. 时间格式的处理和数据填充和分页---laravel

    时间格式文档地址:http://carbon.nesbot.com/docs/ 这是些时间格式,只需要我们这么做就可以 我们在模板层,找到对应的模型对象那里进行处理就可以啦 2018-11-08 16 ...

  3. (转)UIPanGestureRecognizer

    UIPanGestureRecognizer是UIGestureRecognizer类的一个扩展类,其扩展类有UITapGestureRecognizer,UIPinchGestureRecogniz ...

  4. 数据结构之--图(Graphics)

    1.1:图的定义和术语   图是一种比线性表和树更为复杂的数据结构.在线性表中,数据元素之间仅有线性关系,每个元素仅有一个直接前驱和一个直接后继:在树形结构中,数据元素之间有着明显的层次关系,并且每一 ...

  5. 【01】国内外git托管平台(总结by魔芋)

    [01]国内git托管平台介绍 01, github:代码协作平台,协同开发. 代码托管平台. git:项目版本控制系统 02, 最好的托管方式: github 关闭或小众的托管方式: geakit( ...

  6. 【05】project board

    GitHub 上的 project board 我总是用 Jira 做大项目,独立项目用 Trello,这两者我都很喜欢. 后来我知道,GitHub 也有类似的 project board: 我个人为 ...

  7. 面试准备——springboot相关

    https://www.jianshu.com/p/63ad69c480fe https://blog.csdn.net/u013605060/article/details/80255192 htt ...

  8. OSPF 提升 三 type of Areas

    ospf  ccnp 三 上图中 rip域中的不连续的100条路由   在a1中导致LSDB太大      在保证网段的可达性的前提下   尽可能减少区域内路由器的lsdb       可以将a1设置 ...

  9. OSPF 提升四 Network Types & FRAM-RELAY

    Network Types 1.loopback 2.point-to-point 3.broadcast 4.NBMA 5.POINT-TO-Multipoint 6.point-To-Multip ...

  10. 【SQL Server】SQL常用系统函数

    SQL常用系统函数 函数类型 函数表达式 功能 应用举例 字符串函数 SubString(表达式,起始,长度) 取子串 SubString('ABCDEFG',3,4) Right(表达式,长度) 右 ...