Problem getting excanvas to use getContext in IE8

I am trying to implement excanvas in order to ensure canvas tags work in IE8 as well as all the other browsers we use here. I am having an issue getting getContext to work in IE8. I have read about the need to us the G_vmlCanvasManager.initElement routine when dynamically creating canvas objects in the DOM, however I cannot even get statically created objects to work in IE8. I can tell the canvas is create properly because the border appears. All other browsers have no issues. Here is the co

how to implement a single canvas zoom/pan

I have a single canvas element(filled with manually crafted pixel values, not a existing image), I want to implement a zoom/pan control on that canvas, is there any existing library for doing that ? Thanks a lot!

Canvas three.js: How to get multiple materials working for one mesh

I have a big problem with three.js: I want a simple cube with a different color on each face. I have tried this way: // set the scene size var WIDTH = jQuery('#showcase').width() - 20, HEIGHT = jQuery('#showcase').height(); // set some camera attributes var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000000; this.container = jQuery('#showcase'); this.renderer = new THREE.WebGLRenderer(); this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT,

Canvas.toDataURL() working in all browsers except IE10

I'm working on a project that uses a canvas to automatically crop an image, then return its data URL. It uses images from an external server, which has the appropriate CORS headers to allow the images to be converted to data URIs after they are cropped even though they are cross-origin. The code works perfectly (and without security errors!) in all browsers except IE 10, in which it throws 'SCRIPT5022: SecurityError' when canvas.toDataURL() is called. Is this a bug in IE or something I need to

Canvas canvg and highcharts how to include chart legend and keep the chart size?

I'm trying to use canvg to draw a highchart inside a canvas. the problem I have is that the chart legends dont appear in the canvas and also the size and quality is reduced. $('#container').highcharts({ credits: { enabled: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2,

Using Tcl/Tk can canvas tags be configured before using them on an item?

Using Tcl/Tk can canvas tags be configured before using them on an item? For example i have the following snippet: .canvas create rectangle [list 10 10 200 100] -tags t1 Here the rectangle is being created with the tag t1 and i can configure this tag like this: .canvas itemconfigure t1 -fill red Which fills the rectangle with red because it is assigned this tag. Is there a way i can specify the tag first, then dynamically assign these tags to other items at runtime or do tags need to exi

Responsive canvas size and iText rendering with fabricJS

I am using fabricjs in my responsive webpage. I am trying to add some text to the canvas. So far this works ok. Because the webpage is responsive, the canvas container changes in size according to the viewport. I would like that the canvas always takes 90% of the container element. Therefore I am scaling the canvas and all elements inside it so that they keep the same relative positions but take the 90% of the container. ( -> Is there any better way to do this?) Everything works ok, except for

Canvas how to create new instance of PIXI.texture

I'm using PIXI to create sprites from sprite-sheet images and I'm trying to animate them by changing the position of texture frame: // creating new instance of PXI.texure var texture = new PIXI.Texture.fromImage('my-start-frame-name'); // creating sprite var runner = new PIXI.Sprite(texture); // this is the frame I'm using to change the picture in sprite sheet var frame = new PIXI.Rectangle(0, 0, 100, 100); // animating the sprite var interval = setInterval(function () {

using canvas in love2d results in out-of-memory error

I'm currently writing a game (for learning purposes) in lua with love2d and today i wanted to make my window size resizable. I didn't want to resize every graphical object separately, so i searched the web and found a recommendation to use canvases in this case. (draw everything on a canvas; resize it; draw it) Without using canvas, my program uses 252,8mb ram, but as soon as i use canvas, the used memory gets more and more until the program crashes. And since i'm relatively new to lua and new

Canvas ionic 2 framework signature-pad formbuilder issue

I am getting this error when I try to navigate to the mytest page in my Ionic 2 framework based app: Runtime Error Uncaught (in promise): TypeError: sp is not a constructor TypeError: sp is not a constructor at SignaturePad.ngAfterContentInit (http://localhost:8100/build/main.js:63958:29) at callProviderLifecycles (http://localhost:8100/build/main.js:11544:18) at callElementProvidersLifecycles (http://localhost:8100/build/main.js:11525:13) at callLifecycleHooksChildrenFirst (http://localho

JavaFX Canvas - Expand in a Negative Direction

I am writing a program that involves reading data from a USB device and plotting it on a line graph (canvas). The canvas is placed within a ScrollPane, so when the line reaches the end of the canvas the canvas' size is increased and the ScrollPane automatically scrolls to the right. I want to implement the same functionality in the vertical direction, but setHeight(double h) only expands the canvas downward, so this doesn't work for when the line reaches the top of the canvas. Since the canvas

Canvas Rotate - Fabric js

I have created a canvas element and completed the rotate functionality using fabric js. Everything is working fine. But I see a set of dotted lines pointing to the center of the canvas only in the Chrome browser of windows 7 and that too in some devices and not in all windows 7 and chrome combinations. Refer the below link"canvas_rotate". Does anyone faced this issue.? canvas_rotate fabric.loadSVGFromString(svgStr, function(objects, options) { console.log("fabric.loadSVGFromString",svg

Using PyX, how can I set the size of the canvas?

Beginner's question using PyX in Python 3.8.1. I'm creating an EPS file, and would like the canvas size to be 70 mm x 70 mm. How can I do this? from pyx import * # build and size canvas c = canvas.canvas() c.fill(path.circle(2.5, 1.5, 0.5)) c.writeEPSfile("my-output") print("Done!") The .eps file that I get is the size of the element that I've added, but I would like it to be a 70 mm square. Any help appreciated!

Canvas AnalyserNode get frequency snapshot

I'd like to freeze each frame of the audio visualizer I am building https://codesandbox.io/s/eager-johnson-ikekp?file=/src/Visualizer.js:1296-1313 After reading about the analyser node I see that it says this is what it's good for to "provide real-time frequency" https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode So maybe the analyser node isn't the best tool for the job. My goal is to freeze the visualizer frame by frame so I can turn it into a series of images that will th

Canvas Trying to add SwiftUI Preview to UIKit

I am trying to add SwiftUI Preview canvas to my uikit project as below. But I am receiving an error. How can I get rid off this error so I can see my preview? Error is Cannot convert return expression of type 'DonationCell' to return type 'UIViewController' inside the preview. Thanks in advance. class DonationCell: BaseCell { private lazy var containerView: UIView = { let view = UIView() view.backgroundColor = .white view.layer.cornerRadius = 8 //view.layer.applyButtonShadow()

Canvas Trying to allow user to choose which chart to display (using chart.js)

I am trying to create a html page where the user can choose which canvas chart to display. Right now the page displays all charts when it's opened (i.e. like this pic 1) and a dropdown menu. The user can choose a chart (using the dropdown menu) and only that chart is displayed (Please see this pic 2). Then the user can choose to display all charts again. This works. But, when the user tries to display only one chart, it isn't displayed properly (Please see the picture pic 3). I have done this by

Canvas Three.js and WebGL

Please help me with this! I made this last night and upload it on a web server but it doesn't work. I use Three.js JavaScript library and WebGL http://threejs.hit.bg/Three.html One more question - how to make WebglRenderer be faster and better than CanvasRenderer if it is possible.

Only one box2d object drawn on canvas

I am trying to use Box2dWeb to draw few ball objects in the canvas, without using debugDraw(). I am using the following code to draw circles: function drawObjects() { node = world.GetBodyList(); while (node) { var currentBody = node; node = node.GetNext(); position = currentBody.GetPosition(); if (currentBody.GetType() == b2Body.b2_dynamicBody) { canvas.width=canvas.width; context.arc(positio

Canvas Different strokes styles, in different lines

Need several lines but with different styles. However all are in the same style. Thanks. <script> (function draw_b() { var canvas = document.getElementById("cena3_pontos"); var context = canvas.getContext("2d"); //points context.fillStyle = "#ff0000"; //2 e 6 context.fillRect(72,95,2,2); context.fillRect(97,56,2,2); context.fillRect(120,17,2,2); /* Diagonal line,repre

Is there a way to add a canvas element as an image to svg

I have a jsfiddle here: http://jsfiddle.net/Gt7wQ/ What I'm trying to do is add the temporary canvas element that I just drew onto my svg board. Is that possible? What I'm trying to do now is: svg.append("image") .attr("xlink:href", temp_canvas) .attr("x", 0) .attr("y", 0); Thanks

Canvas frabric js freedrawing, get a reference to the object draw

When using fabricjs in free draw mode, you can brush paths. Is there a way to get a reference as object to these paths, immediately after it is drawn? Example on mouse up get the object: canvas.on('mouse:up', function(options) { var lastfreedraw = options.getLastFreeObject(); });

How to fix canvas seo limits?

I'm a designer who is also a noob developer. I know basic html/css/javascript/python. I for the most part design my sites using the canvas element since I'm really good with vector art and can make kicK ass sites like that. I didn't know that seo crawlers cant really read text in canvas elements very well practically making my site invisible to google. On another thread here someone mentioned that this could be fixed if one were to "programmatically move html elements with the text using CSS". C

Canvas JavaFX: How to use the GraphicsContext method appendSVGPath(String svgpath)

I'm working on a project that makes use of SVG's. Currently the program has the SVG's stored as SVGPath objects in an FXML file. The file is then loaded into a Group which is then added to the screen. In the FXML file, there are approximately 300 such SVGPaths. Which I believe ultimately means that there are 300 nodes on the scene graph. I'm going to eventually have to scale up the number of SVGPath and am having concerns about putting more nodes on the scene, so I began to look at using

add multiple different layers in canvas

I am trying to add several multiple shapes in different colours in my HTML canvas using paper.js. Is there a way to do this without having several canvases? Is it possible to draw the shapes within one canvas? Here is what I have: https://jsfiddle.net/8hywopu8/1/ HTML: <canvas id="bacterium"></canvas> <canvas id="bacterium"></canvas> <canvas id="bacterium"></canvas> <canvas id="bacterium"></canvas> <canvas id="bacterium"></canvas>

Canvas Embed PowerApps from a different tenant on a SharePoint page

I tried to embed a PowerApps application from a different tenant on my SharePoint Online Page using the Embed webpart. I am passing the app Id and the tenantId in the iframe source. I also added the current logged-in user as a guest in the other tenant and also I shared the PowerApp with him. First time the App was loaded successfully, but then after a few refreshes, I got the message: "Sorry, we didn’t find that app." I am using Chrome. and the issue is sporadic. Does anyone experienced th

How to Undisplay an Image (CANVAS)

I'm trying to come up with a way where an image transitions in and out of the screen for a few seconds each. (Into the screen and stays for about 5 seconds then transitions out and stays hidden). I already have code for transitioning in, my problem is getting it to transition out. This is the transition in code. let canvas = null; let ctx = null; window.onload = onAllAssetsLoaded; function onAllAssetsLoaded() { // stopAndHide the webpage loading message canvas = document.getElementById

Put widgets on Canvas Tkinter

I'm trying to set a background image in my GUI, but I haven't been able to place my widgets over the canvas. I've read some similar posts and I learnt I need to make my widgets children of the Canvas and, that's the tricky part because I've been trying, however, I can't figure it out. I have this so far. import tkinter as tk from tkinter import * class Layout(tk.Frame): def __init__ (self, master=None): super().__init__(master) self.master= master self.pack()

Canvas SwiftUI Preview SKProduct with introductoryPrice

I am trying to mock an SKProduct so I'm able to view it in the preview canvas in SwiftUI. I have been able to create a dummy SKProduct with a convenience init inside SKProduct... //Mock Product convenience init(identifier: String, price: String, priceLocale: Locale) { self.init() self.setValue(identifier, forKey: "productIdentifier") self.setValue(NSDecimalNumber(string: price), forKey: "price") self.setValue(priceLocale, forKey: "priceLocale") } But I can't figure out how to

Canvas Label Declutter Circles with declut

I'm using openLayers to display thousands of Circles over a map. However when displaying all of the points it becomes a little overwhelming to the eye. To help with this I added the declutter option in the vector Layer: const allPointLayer = new VectorLayer({ source: pointSource, visibility: true, style: scanLocationStyle, extent: this.extent, declutter: true, }); This was somewhat helpful as it would dynamically change the

Canvas Correct algorithm to resize a rectangle on mouse drag

I am using paper.js to make a level editor. I am currently bugging on how to resize a rectangle properly Currently, I am doing something like : rect.onMouseDrag = event => { let selectedNode = rect.selectedNode; selectedNode.point.x += event.delta.x; selectedNode.point.y += event.delta.y; switch (rect.selectedNode.index) { case 0: rect.segments[1].point.x += event.delta.x; rect.segments[3].point.y += event.delta.y; break; ca

UWP UserControl with Canvas: how do you draw?

For the Uno platform, based on UWP, I want to create a UserControl which contains a Canvas where I can draw something. I can't find any documentation or examples on what drawing events occur and how to use them. I believe my XAML can be, minimally, like this: <UserControl x:Class="UnoTest.Shared.Controls.ExpandableImage" ... <Canvas /> </UserControl> And the code behind like this: namespace UnoTest.Shared.Controls { public sealed partial class ExpandableImage :

Canvas and LWUIT in J2ME

In my application I have to add TextField,Label and Button in the Tab View of the Canvas Class. How can I add LWUIT components into Canvas Class?

Canvas Kinetic.JS - can't change z-index order of layers?

I can successfully change the z-index of shapes and groups, but I have so far not been able to do this for layers. JS Fiddle demo Instead, they seem doomed to stay in the stack order that I added them to the stage. I've tried: layer.moveToTop(); layer.setZIndex(100); ...but no change (even though layer nodes do inherit these methods). What am I missing here? Thanks in advance

draw multiple multiline textviews on canvas?

I'm working at an Android project where I want to draw three different user-inputs onto a canvas of a given width. The three inputs shall have a customizable layout / different printing. Think of something like a text advertisment in a newspaper where title, content and contact data got a different text layout. So far I use this solution to format the input regarding linebreaks etc. Right now it looks like this: TextView tv_title = new TextView(this); tv_title.setText(titleText); tv_tit

Canvas Point / Line Detection Based on a Set of Consecutive / Semi-Consecutive Points

I am trying to write some point / line detection software based on what a user is drawing on a canvas (I have been doing this all via the web and html 5 canvas). When a user performs a MouseDown event we create an array that will hold all of the points of his / her drawing. Each MouseMove event after that pushes a point (x, y) onto the array. The MouseUp event signals the end of the user's drawing. What I want to do with those points is determine where the user has distinctly changed directio

Canvas WebGL / GLSL: How to set background color of embedded x-shader/x-fragment?

-- Pardon, I'm new to GLSL ... I'm trying to achieve something I thought would be simple, but can't solve after a lot of reading. I have the below x-shader/x-fragment which animates some swirling colors on a black rgb(0, 0, 0) background. I have it embedded in some html within a <canvas> element. I just wanted to change the background to a lighter black rgb(32, 32, 32) How do I achieve this? (changing the CSS background color of <canvas> tag or container div had no effect. You

Canvas Zoomcharts API on safari

I am using zoomcharts api for drill downs in pie charts and it seems to work pretty good on all browsers except for safari which crashes after few clicks. I am using basic configurations for it as followed: var data = { "subvalues":[ {"value":50, "name":"Apples", "subvalues":[ {"value":25, "name":"Red apples"}, {"value":15, "name":"Yellow apples"}, {"value":10, "name":"Green apples"}]}, {"value":30, "name":"Oranges", "subvalues":[ {"value":10, "name":

how to add svg to canvas, which is part of the object

I am not able to add svg image to canvas, which is part of the object. If i add this svg image to canvas in window.onload function - it works, but if i do this inside handObj.prototype.svgToBlob, the image is not displayed. If i copy and paste svg to the html it displays the image of keyboard. Does smth happens with scope? How i could resolve this? I mean how to disply svg on canvas, from the function, which is part of object prototype? //Svg is very large, this is a shortened version. <

Canvas What is default context for rendering in cytoscape.js lib?

I know that cytoscape doesn`t support webgl-3d axes. But does it support webgl for rendering in 2D? And what is the default context for rendering in cytoscape and if it`s canvas, how to use webgl in this case ? For example I have to render 2k elements with edges from central element to all other elements using only 2d. let layout = { container: document.getElementById('app'), elements: [] }; for(let i = 0, j = 2000, k = 0; i < 2000; i++) { layout.elements[i] = { data: { id: 'n

Is there a tool for putting together multiple SVGs onto one co-ordinate canvas?

new coder here so please go easy on me. I've found an online map called JQV map that uses SVG paths to plot out the country shapes. I've also found another free license collection of much more detailed SVG plots of individual countries. Each country is on its own 'canvas' (don't know if that is the right word for it) so if I put them together they would just overlay. I was wondering how can I sew together these countries and recreate the map with my new country shapes? Also will the requirement

Canvas Is it possible to apply clip() or globalCompositeOperation() between two shapes, and then stop clipping / compositing?

I want to render a red square, then apply a globalCompositeOperation = 'source-in' between a blue square and a lime square, and then resume 'normal' rendering, i.e. without the clipping / compositing applied. How can I achieve this? The only way I've gotten it to work is by rendering multiple canvases on top of each other, and applying the clipping / compositing in a separate canvas. In this fiddle, the second canvas visually shows the effect I'm after. const canvas = document.getElementById('ca

Canvas canvg rendering aligned textPath not working

im trying to create from an generated (with d3js) SVG Object an PNG image using canvg. All the paths (there are not in example) are rendered perfectly, but the textPath, that is aligned to a circle path is not shown (s. jsFiddle example). Where does it go wrong? How could be the textPath rendered by the canvg properly? Here is my example http://jsfiddle.net/T3AR4/ Im using that part in SVG to draw the text: <def> <path id="time_path" d="M450 12.5 a437.5 437.5 0 1 1 -1 0"></pa

How to increase resolution of circular graph in canvas

I am using a circular graph in a canvas following the process shown in codepen As you can see, the circle is blurred out when I zoom in page. I want to get the line high resolution. How can I do it in a way that It does not blur after zooming in the page. Js code I am using is given below: $(document).ready(function(e) { var el = document.getElementById('graph-1'); // get canvas var options = { percent: el.getAttribute('data-percent') , size: el.getAttribute('data-size') , /*|| 177*/ lineWi

Canvas Bricks disappearing yet ball bouncing off from them in html5 brick breaker game

I was following the tutorial https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript to create the basic js games in HTML. I followed this tutorial and created the game with js as shown: var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var paddleWidth = 75; var paddleHeight = 10; var paddleX = (canvas.width - paddleWidth)/2; var paddleY = (canvas.height - paddleHeight); var paddleColour = "#0095DD";

  1    2   3   4   5   6  ... 下一页 最后一页 共 8 页