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. mem之读操作调式总结(跟入栈出栈有关)

    现象: 1.当case比较复杂的时候(含有for循环对mem进行读/写) 发现for循环时总是有汇编指令不执行跳过去了,(其实是汇编不熟和指令太多无法理智分析指令了). 事实是指令是对的,但执行错了( ...

  2. Web框架之Django_10 重要组件(Auth模块)

    一.auth模块介绍 Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等 ...

  3. django第六天(模板相关,过滤器和标记)

    django第6天 DTL简介 django template language django模板语言 语法: filter{{}} tag{% %} 简单变量的使用 视图函数可以通过两种方式将变量船 ...

  4. [转]automaticallyAdjustsScrollViewInsets(个人认为iOS7中略坑爹的属性)

    @当我们在一个UIViewController中同时创建2个tableView的时候,如果把它们的frame中的Y坐标设置为一样,你可能会发现它们的位置并没有达到你想要的结果.比如第一tableVie ...

  5. LeetCode(7)Reverse Integer

    题目: Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 分析: ...

  6. PAT Basic 1055

    1055 集体照 拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每排人数为 N/K(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排 ...

  7. ssh执行远程服务器脚本 提示php: command not found

    ssh执行远程服务器脚本 提示php: command not found 设置环境变量 一台机器作为管理机,来管理其他服务器,并通过key认证,免密码登陆的. 在管理机上通过ssh登陆到其他服务器来 ...

  8. [android 应用开发]android 分层

    1 应用层, 2 应用框架层(框架是所有开发人员共同使用和遵守的约定) 3 系统运行库层 4 linux内核层

  9. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) D. Field expansion

    D. Field expansion time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  10. 刷题总结——竞赛得分(ssoj)

    题目: 题目描述 ZZH 在经历了无数次学科竞赛的失败以后,得到了一个真理:做一题就要对一题!但是要完全正确地做对一题是要花很多时间(包括调试时间),而竞赛的时间有限.所以开始做题之前最好先认真审题, ...