एक <कैनवास> तत्व का अधिकतम आकार

Question

मैं की ऊंचाई के साथ एक कैनवास तत्व के साथ काम कर रहा हूँ 600करने के लिए 1000पिक्सल और कई दसियों या पिक्सल के सैकड़ों हजारों की चौड़ाई। हालाँकि, एक निश्चित संख्या में पिक्सेल (स्पष्ट रूप से अज्ञात) के बाद, कैनवस अब जेएस के साथ आकृतियों को प्रदर्शित नहीं करता है।

किसी को पता है कि क्या कोई सीमा है?

क्रोम 12 और फ़ायरफ़ॉक्स 4 दोनों में परीक्षण किया गया।

Comments

@ 21ime उन्होंने कहा tens OR hundreds of thousands...

— तेदेपा

मुझे भी इसका अनुभव है। मेरे पास एक 8000x8000 कैनवास है जो ठीक काम करता है, लेकिन जब मैं इसे बड़ा करता हूं तो सामग्री गायब हो जाती है और यह सिर्फ आकर्षित नहीं होगा। यह जिस आकार में काम करने में विफल रहता है वह मेरे iPad पर बहुत कम है। मुझे आश्चर्य है कि अगर इसकी स्मृति किसी प्रकार की सीमा है।

— जोशुआ

यह अजीब है जब आप 2 साल पहले से अपनी टिप्पणी पाते हैं और आप अभी भी उसी समस्या से निपट रहे हैं।

— जोशुआ

@ जोशुआ और अभी भी एक साल बाद!

— यूजीन यू

सवाल यह है कि मैं इन त्रुटियों, या बेहतर चेतावनियों को कैसे पकड़ सकता हूं, जो कि वे क्या हैं? मैं उपकरणों के हार्डवेयर का पता नहीं लगा सकता, इसलिए मुझे एक त्रुटि पर प्रतिक्रिया करनी होगी।

— br4nnigan

Answer 1

अपडेट किया गया 10/13/2014

सभी परीक्षण किए गए ब्राउज़रों में कैनवास तत्वों की ऊंचाई / चौड़ाई की सीमा होती है, लेकिन कई ब्राउज़र कैनवास तत्व के कुल क्षेत्र को भी सीमित करते हैं। सीमाएं उन ब्राउज़रों के लिए हैं जिनका मैं परीक्षण कर सकता हूं:

क्रोम:

अधिकतम ऊंचाई / चौड़ाई: 32,767 पिक्सेल
अधिकतम क्षेत्र: 268,435,456 पिक्सेल (जैसे, 16,384 x 16,384 पिक्सेल)

फ़ायरफ़ॉक्स:

अधिकतम ऊंचाई / चौड़ाई: 32,767 पिक्सेल
अधिकतम क्षेत्र: 472,907,776 पिक्सेल (उदाहरण के लिए, 22,528 x 209999)

अर्थात:

अधिकतम ऊंचाई / चौड़ाई: 8,192 पिक्सल
अधिकतम क्षेत्र: एन / ए

IE मोबाइल:

अधिकतम ऊंचाई / चौड़ाई: 4,096 पिक्सल
अधिकतम क्षेत्र: एन / ए

अन्य:

मैं इस समय अन्य ब्राउज़रों का परीक्षण करने में सक्षम नहीं हूं। अतिरिक्त सीमाओं के लिए इस पृष्ठ पर अन्य उत्तरों का संदर्भ लें।

---

अधिकांश ब्राउज़रों पर अधिकतम लंबाई / चौड़ाई / क्षेत्र से अधिक होने से कैनवास अनुपयोगी हो जाता है। (यह किसी भी ड्रॉ कमांड की अनदेखी करेगा, यहाँ तक कि प्रयोग करने योग्य क्षेत्र में भी।) IE और IE मोबाइल सभी ड्रॉ कमांड को प्रयोग करने योग्य स्थान के भीतर सम्मानित करेगा।

Comments

तो, संबंधित प्रश्न ... यदि उन्हें एक कैनवास की आवश्यकता होती है तो वह सीमा के आसपास कैसे काम करता है जो अनुमत अधिकतम से बड़ा है?

— अरोठ

@aroth, मैंने कैनवास एपीआई के चारों ओर एक आवरण लिखना समाप्त कर दिया है जो कई स्टैक्ड <canvas>तत्वों का उपयोग करता है और स्वचालित रूप से उपयुक्त संदर्भ में ड्राइंग निर्देश लागू करता है।

— ब्रैंडन गानो

बहुत उपयोगी लगता है। क्या यह गितुब पर नहीं है?

— आरोह

Safari (गैर-iOS संस्करण) Chrome.irefox की तरह 32K का उपयोग करता है। इसके अलावा, अगर आप उस रैपर कोड में से कुछ को फिर से बनाने की कोशिश करना चाहते हैं, तो मैंने IE के paltry 8K की सीमा के लिए अपने स्वयं के धन्यवाद का एक ओपन-सोर्स संस्करण शुरू किया: github.com/adam-roth/wrapped-canvas

— aroth

iPhone 6 प्लस पर iOS 9.3.1 सफारी 16777216 पिक्सल (उदाहरण के लिए, 4096 x 4096) के एक क्षेत्र तक सीमित है। मुझे संदेह है कि यह नए iOS उपकरणों में एक सामान्य संख्या है

— 21

Answer 2

मैं फ़ायरफ़ॉक्स पर मेमोरी त्रुटियों को कैनवास की ऊँचाई से ch००० से अधिक भाग गया हूँ, क्रोम बहुत अधिक, कम से कम ३२००० तक संभालता है।

संपादित करें: कुछ और परीक्षण चलाने के बाद, मुझे फ़ायरफ़ॉक्स 16.0.2 के साथ कुछ बहुत ही अजीब त्रुटियां मिली हैं।

पहले, मुझे HTML घोषित कैनवास के विपरीत मेमोरी (जावास्क्रिप्ट में निर्मित) कैनवास से अलग व्यवहार प्राप्त होता है।

दूसरा, यदि आपके पास उचित html टैग और मेटा चारसेट नहीं है, तो कैनवास को 8196 तक सीमित रखा जा सकता है, अन्यथा आप 32767 तक जा सकते हैं।

तीसरा, यदि आपको कैनवास का 2d संदर्भ मिलता है और फिर कैनवास का आकार बदल जाता है, तो आप 8196 तक ही सीमित रह सकते हैं। बस 2d संदर्भ को हथियाने से पहले कैनवास का आकार निर्धारित करने से आपको 32767 तक मेमोरी त्रुटियां होने की अनुमति मिलती है।

मैं लगातार मेमोरी त्रुटियों को प्राप्त करने में सक्षम नहीं हुआ हूं, कभी-कभी यह केवल पहले पृष्ठ लोड पर होता है, और फिर बाद में ऊंचाई में परिवर्तन होता है। यह html फाइल है जिसका मैं http://pastebin.com/zK8nZxdE के साथ परीक्षण कर रहा था ।

Comments

"दूसरा, यदि आपके पास उचित html टैग और मेटा चारसेट नहीं है, तो कैनवास को 8196 तक सीमित रखा जा सकता है, अन्यथा आप 32767 तक जा सकते हैं" - यहाँ उचित html टैग और मेटा चारसेट से आपका क्या मतलब है?

— जैक एडले

निश्चित रूप से आपका मतलब 8192 (2 ^ 13) है? 8196 एक अजीब संख्या है।

— jamesdlin

Answer 3

iOS अधिकतम कैनवास आकार (चौड़ाई x ऊँचाई):

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

मार्च 2014 को परीक्षण किया गया।

Comments

ये मूल्य मनमानी हैं। कृपया नीचे मेरी पोस्ट देखें जिसमें सफारी की सामग्री मार्गदर्शिका का संदर्भ है

— dcbarans

Answer 4

@FredericCharette उत्तर पर थोड़ा विस्तार करने के लिए: "iOS संसाधन सीमाएँ जानें" अनुभाग के तहत सफारी की सामग्री गाइड के अनुसार :

एक कैनवास तत्व के लिए अधिकतम आकार 256 एमबी से कम वाले उपकरणों के लिए 3 मेगापिक्सल और 256 एमबी रैम के बराबर या उससे अधिक वाले उपकरणों के लिए 5 मेगापिक्सेल है।

इसलिए, 5242880 (5 x 1024 x 1024) पिक्सेल का कोई भी आकार भिन्नता बड़े मेमोरी उपकरणों पर काम करेगा, अन्यथा यह 3145728 पिक्सेल है।

5 मेगापिक्सेल कैनवास के लिए उदाहरण (चौड़ाई x ऊँचाई):

Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP   (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP

और इसी तरह..

सबसे बड़ा वर्ग कैनवस हैं ("MiB" = 1024x1024 बाइट्स):

device < 256 MiB   device >= 256 MiB   iPhone 6 [not confirmed]
-----------------  -----------------   ---------------------
<= 3145728 pixels  <= 5242880 pixels   <= 16 x 1024 x 1024 p
1773 x 1773        2289 x 2289         4096 x 4096

Comments

अधिक विशिष्ट होने के लिए, iPhone5 की सीमा 3 * 1024 * 1024 = 3145728 पिक्सेल है। (यह सोचने के बाद कि मेरा कैनवास एंड्रॉइड पर ठीक क्यों था लेकिन iOS पर खाली था, मुझे यह उत्तर मिला, और साथ ही stackoverflow.com/questions/12556198/… और मेरा Phonegap ऐप काम कर गया।)

— मैग्नस स्मिथ

FYI करें, Apple ने विशिष्ट आकार की जानकारी "Safari / Know iOS Resource Limits" से हटा दी है। अब यह केवल छोटी छवियों का उपयोग करके बैंडविड्थ को कम करने के बारे में सामान्य सलाह है।

— टूलमेकरसेव

@ matb33 ने इस सवाल पर एक टिप्पणी में बताया कि iPhone 6 में 16 * 1024 * 1024 की सीमा प्रतीत होती है।

— टूलमेकरसैट

Answer 5

2018 के लिए अपडेट करें:

समय के साथ-साथ, कैनवास की सीमाएं बदल गई हैं। अफसोस की बात है, जो नहीं बदला है वह यह है कि ब्राउज़र अभी भी कैनवास एपीआई के माध्यम से कैनवास के आकार की सीमाओं के बारे में जानकारी नहीं देता है।

प्रोग्राम के रूप में, ब्राउज़र की अधिकतम कैनवास आकार या कस्टम कैनवास आयामों के लिए परीक्षण समर्थन निर्धारित करने के लिए बाहर की जाँच के लिए देख रहे लोगों के लिए कैनवास आकार ।

• गीथहब : https://github.com/jhildenbiddle/canvas-size
• एनपीएम : https://www.npmjs.com/package/canvas-size

डॉक्स से:

HTML कैनवास तत्व को आधुनिक और विरासत ब्राउज़रों द्वारा व्यापक रूप से समर्थित किया गया है, लेकिन प्रत्येक ब्राउज़र और प्लेटफ़ॉर्म संयोजन अद्वितीय आकार की सीमाएं लगाता है जो कि कैनवास के पार होने पर अनुपयोगी हो जाएगा। दुर्भाग्य से, ब्राउज़र यह निर्धारित करने के लिए एक तरीका प्रदान नहीं करते हैं कि उनकी सीमाएँ क्या हैं, और न ही एक अनुपयोगी कैनवास बनाए जाने के बाद वे किसी भी प्रकार की प्रतिक्रिया प्रदान करते हैं। यह बड़े कैनवास तत्वों के साथ एक चुनौती का काम करता है, खासकर उन अनुप्रयोगों के लिए जो विभिन्न प्रकार के ब्राउज़रों और प्लेटफार्मों का समर्थन करते हैं।

यह माइक्रो-लाइब्रेरी ब्राउज़र द्वारा समर्थित एक HTML कैनवास तत्व की अधिकतम क्षेत्र, ऊंचाई, और चौड़ाई के साथ-साथ कस्टम कैनवास आयामों का परीक्षण करने की क्षमता प्रदान करता है। एक नया कैनवास तत्व बनने से पहले इस जानकारी को एकत्रित करके, अनुप्रयोग प्रत्येक ब्राउज़र / प्लेटफ़ॉर्म की आकार सीमाओं के भीतर कैनवस आयामों को मज़बूती से सेट करने में सक्षम हैं।

README में एक डेमो लिंक और परीक्षण के परिणाम उपलब्ध हैं , साथ ही एक ज्ञात मुद्दे अनुभाग जो प्रदर्शन और आभासी मशीन के विचारों पर छूता है।

पूर्ण प्रकटीकरण, मैं पुस्तकालय का लेखक हूं। मैंने इसे 2014 में वापस बनाया और हाल ही में एक नए कैनवास-संबंधित प्रोजेक्ट के लिए कोड का पुनरीक्षण किया। मैं 2018 में कैनवास के आकार की सीमाओं का पता लगाने के लिए उपलब्ध उपकरणों की समान कमी को देखकर आश्चर्यचकित था, इसलिए मैंने कोड को अपडेट किया, इसे जारी किया, और आशा है कि यह दूसरों को इसी तरह के मुद्दों को चलाने में मदद करता है।

Answer 6

डब्ल्यू 3 स्पेक्स के अनुसार , चौड़ाई / ऊंचाई इंटरफ़ेस एक अहस्ताक्षरित लंबा है - इसलिए 0 से 4,294,967,295 (यदि मुझे वह संख्या सही याद है - कुछ बंद हो सकती है)।

संपादित करें: अजीब तरह से, यह बिना बताए लंबा है, लेकिन यह परीक्षण अधिकतम के रूप में सिर्फ एक सामान्य लंबे मूल्य को दर्शाता है : 2147483647। जेसेफल्ड - 47 काम करता है लेकिन 48 तक है और यह डिफ़ॉल्ट रूप से वापस लौटता है।

Comments

हम्म। दिलचस्प है, लेकिन मुझे 1.5 बिलियन भी नहीं मिलते।

— गंभीरदेव

संपादित, खेद (जो मुझे पहले परीक्षण नहीं करने के लिए मिलता है) - दिखाने के लिए एक jsfiddle जोड़ा।

— डब्ल्यूएसडीकेडी

Answer 7

भले ही कैनवास आपको ऊंचाई डालने की अनुमति देगा = 2147483647, जब आप ड्राइंग शुरू करते हैं, तो कुछ भी नहीं होगा

ड्राइंग तभी होता है जब मैं ऊंचाई को 32767 पर लाता हूं

Answer 8

iOS की अलग-अलग सीमाएं हैं।

IOS 7 सिम्युलेटर का उपयोग कर मैं सीमा का प्रदर्शन करने में सक्षम था 5MB इस तरह है:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1024;
alert(canvas.toDataURL('image/jpeg').length);
// prints "110087" - the expected length of the dataURL

लेकिन अगर मैं पिक्सेल की एक पंक्ति द्वारा कैनवास के आकार को कुतर देता हूं:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1025;
alert(canvas.toDataURL('image/jpeg'));
// prints "data:," - a broken dataURL

Comments

आपको iOS सिम्युलेटर पर ऐसे डेटा को आधार नहीं बनाना चाहिए।

— ज़ोल्टन

Answer 9

पीसी पर-
मुझे नहीं लगता कि कोई प्रतिबंध है लेकिन हां आप मेमोरी अपवाद से बाहर निकल सकते हैं।

मोबाइल उपकरणों पर-
यहाँ मोबाइल उपकरणों के लिए कैनवास के लिए प्रतिबंध है: -

एक कैनवास तत्व के लिए अधिकतम आकार 256 एमबी से कम वाले उपकरणों के लिए 3 मेगापिक्सल और 256 एमबी रैम से अधिक के बराबर डिवाइस के लिए 5 मेगापिक्सेल है।

उदाहरण के लिए - यदि आप Apple के पुराने हार्डवेयर का समर्थन करना चाहते हैं, तो आपके कैनवास का आकार 2048 × 1464 से अधिक नहीं हो सकता है।

आशा है कि ये संसाधन आपको बाहर निकालने में मदद करेंगे।

Answer 10

सफारी (सभी प्लेटफार्मों) के लिए सीमाएं बहुत कम हैं।

ज्ञात आईओएस / सफारी सीमाएँ

उदाहरण के लिए, मेरे पास 6400x6400px कैनवास बफ़र था, जिस पर डेटा खींचा गया था। सामग्री को ट्रेस / निर्यात करके और अन्य ब्राउज़रों पर परीक्षण करके, मैं देख पा रहा था कि सब कुछ ठीक था। लेकिन सफारी पर, यह मेरे मुख्य संदर्भ में इस विशिष्ट बफर की ड्राइंग को छोड़ देगा।

Comments

Yeep! सफारी आपके कैनवास को खींचती है क्योंकि आप "अनुमति" के रूप में बड़े कैनवास का उपयोग करते हैं। मेरे द्वारा पोस्ट किए गए अधिकतम आयाम देखें! वह अधिकतम है। इस सफारी / उपकरणों पर कैनवास।

— डेडो

आपके आकार बहुत मनमाने हैं, वे नहीं हैं? क्या आपके पास कोई दस्तावेज है? आपकी परीक्षण प्रक्रिया क्या थी?

— NodeNodeNode

Answer 11

मैंने प्रोग्रामेटिक रूप से सीमा का पता लगाने की कोशिश की: 35000 से शुरू होने वाले कैनवास के आकार को सेट करना, जब तक वैध आकार नहीं मिल जाता, तब तक 100 से नीचे जाना। हर स्टेप में राइट-बॉटम पिक्सेल लिखना और फिर उसे पढ़ना। यह काम करता है - सावधानी के साथ।

गति स्वीकार्य है अगर या तो चौड़ाई या ऊंचाई कुछ कम मूल्य (जैसे 10-200) पर सेट है get_max_canvas_size('height', 20)।

लेकिन अगर चौड़ाई या ऊँचाई के बिना कहा जाता है get_max_canvas_size(), तो बनाया गया कैनवास इतना बड़ा है कि SINGLE पिक्सेल रंग पढ़ना बहुत धीमा है, और IE में गंभीर हैंग होता है।

यदि इस तरह का परीक्षण पिक्सेल मूल्य को पढ़े बिना किसी दिन किया जा सकता है, तो गति स्वीकार्य होगी।

बेशक अधिकतम आकार का पता लगाने का सबसे आसान तरीका अधिकतम चौड़ाई और ऊंचाई को क्वेरी करने का कुछ मूल तरीका होगा। लेकिन कैनवस 'एक जीवन स्तर है', इसलिए हो सकता है कि यह किसी दिन आ रहा हो।

http://jsfiddle.net/timo2012/tcg6363r/2/ (जागरूक रहें! आपका ब्राउज़र हैंग हो सकता है!)

if (!Date.now)
{
  Date.now = function now()
  {
    return new Date().getTime();
  };
}

var t0 = Date.now();
//var size = get_max_canvas_size('width', 200);
var size = get_max_canvas_size('height', 20);
//var size = get_max_canvas_size();
var t1 = Date.now();
var c = size.canvas;
delete size.canvas;
$('body').append('time: ' + (t1 - t0) + '<br>max size:' + JSON.stringify(size) + '<br>');
//$('body').append(c);

function get_max_canvas_size(h_or_w, _size)
{
  var c = document.createElement('canvas');
  if (h_or_w == 'height') h = _size;
  else if (h_or_w == 'width') w = _size;
  else if (h_or_w && h_or_w !== 'width' && h_or_w !== 'height' || !window.CanvasRenderingContext2D)
    return {
      width: null,
      height: null
    };
  var w, h;
  var size = 35000;
  var cnt = 0;
  if (h_or_w == 'height') w = size;
  else if (h_or_w == 'width') h = size;
  else
  {
    w = size;
    h = size;
  }

  if (!valid(w, h))
    for (; size > 10; size -= 100)
    {
      cnt++;
      if (h_or_w == 'height') w = size;
      else if (h_or_w == 'width') h = size;
      else
      {
        w = size;
        h = size;
      }
      if (valid(w, h)) break;
    }
  return {
    width: w,
    height: h,
    iterations: cnt,
    canvas: c
  };

  function valid(w, h)
  {
    var t0 = Date.now();
    var color, p, ctx;
    c.width = w;
    c.height = h;
    if (c && c.getContext)
      ctx = c.getContext("2d");
    if (ctx)
    {
      ctx.fillStyle = "#ff0000";
      try
      {
        ctx.fillRect(w - 1, h - 1, 1, 1);
        p = ctx.getImageData(w - 1, h - 1, 1, 1).data;
      }
      catch (err)
      {
        console.log('err');
      }

      if (p)
        color = p[0] + '' + p[1] + '' + p[2];
    }
    var t1 = Date.now();

    if (color == '25500')
    {
      console.log(w, h, true, t1 - t0);
      return true;
    }
    console.log(w, h, false, t1 - t0);
    return false;
  }
}

Comments

यह en.wikipedia.org/wiki/Exponential_search

— ब्रेंडन एनेबल

यह वास्तव में पागल है कि एक कैनवास बनाने में विफलता इस बड़े चुप है, इसलिए पता लगाने का कोई तरीका नहीं है ... अपनी तरफ से किसी भी तरह से बुरा नहीं है, यह ब्राउज़रों के लिए बस हमारे लिए एक पागल बात है

— कॉलिन डी

@ColinD मैं सहमत हूँ। यह जानकारी का सिर्फ एक छोटा सा टुकड़ा होगा। यह होगा। और चाहिए।

— तिमो क्वाकोनें

Answer 12

जब आप वेबजीएल कैनवस का उपयोग कर रहे हैं, तो ब्राउज़र (डेस्कटॉप वाले सहित) अंतर्निहित बफर के आकार पर अतिरिक्त सीमाएं लगाएंगे। यहां तक ​​कि अगर आपका कैनवास बड़ा है, उदाहरण के लिए 16,000x16,000, तो अधिकांश ब्राउज़र एक छोटी (4096x4096 कहते हैं) चित्र को रेंडर करेंगे, और इसे स्केल करेंगे। यह बदसूरत पिक्सेलिंग आदि का कारण हो सकता है।

यदि किसी को कभी भी इसकी आवश्यकता होती है, तो अधिकतम आकार का उपयोग करके यह निर्धारित करने के लिए मैंने कुछ कोड लिखे हैं। determineMaxCanvasSize()वह फ़ंक्शन है जिसमें आप रुचि रखते हैं।

function makeGLCanvas()
{
    // Get A WebGL context
    var canvas = document.createElement('canvas');
    var contextNames = ["webgl", "experimental-webgl"];
    var gl = null;
    for (var i = 0; i < contextNames.length; ++i)
    {
        try
        {
            gl = canvas.getContext(contextNames[i], {
                // Used so that the buffer contains valid information, and bytes can
                // be retrieved from it. Otherwise, WebGL will switch to the back buffer
                preserveDrawingBuffer: true
            });
        }
        catch(e) {}
        if (gl != null)
        {
            break;
        }
    }
    if (gl == null)
    {
        alert("WebGL not supported.\nGlobus won't work\nTry using browsers such as Mozilla " +
            "Firefox, Google Chrome or Opera");
        // TODO: Expecting that the canvas will be collected. If that is not the case, it will
        // need to be destroyed somehow.
        return;
    }

    return [canvas, gl];
}

// From Wikipedia
function gcd(a,b) {
    a = Math.abs(a);
    b = Math.abs(b);
    if (b > a) {var temp = a; a = b; b = temp;}
    while (true) {
        if (b == 0) return a;
        a %= b;
        if (a == 0) return b;
        b %= a;
    }
}

function isGlContextFillingTheCanvas(gl) {
    return gl.canvas.width == gl.drawingBufferWidth && gl.canvas.height == gl.drawingBufferHeight;
}

// (See issue #2) All browsers reduce the size of the WebGL draw buffer for large canvases 
// (usually over 4096px in width or height). This function uses a varian of binary search to
// find the maximum size for a canvas given the provided x to y size ratio.
//
// To produce exact results, this function expects an integer ratio. The ratio will be equal to:
// xRatio/yRatio.
function determineMaxCanvasSize(xRatio, yRatio) {
    // This function works experimentally, by creating an actual canvas and finding the maximum
    // value, the browser allows.
    [canvas, gl] = makeGLCanvas();

    // Reduce the ratio to minimum
    gcdOfRatios = gcd(xRatio, yRatio);
    [xRatio, yRatio] = [xRatio/gcdOfRatios, yRatio/gcdOfRatios];

    // if the browser cannot handle the minimum ratio, there is not much we can do
    canvas.width = xRatio;
    canvas.height = yRatio;

    if (!isGlContextFillingTheCanvas(gl)) {
        throw "The browser is unable to use WebGL canvases with the specified ratio: " + 
            xRatio + ":" + yRatio;
    }

    // First find an upper bound
    var ratioMultiple = 1;  // to maintain the exact ratio, we will keep the multiplyer that
                            // resulted in the upper bound for the canvas size
    while (isGlContextFillingTheCanvas(gl)) {
        canvas.width *= 2;
        canvas.height *= 2;
        ratioMultiple *= 2;
    }

    // Search with minVal inclusive, maxVal exclusive
    function binarySearch(minVal, maxVal) {
        if (minVal == maxVal) {
            return minVal;
        }

        middle = Math.floor((maxVal - minVal)/2) + minVal;

        canvas.width = middle * xRatio;
        canvas.height = middle * yRatio;

        if (isGlContextFillingTheCanvas(gl)) {
            return binarySearch(middle + 1, maxVal);
        } else {
            return binarySearch(minVal, middle);
        }
    }

    ratioMultiple = binarySearch(1, ratioMultiple);
    return [xRatio * ratioMultiple, yRatio * ratioMultiple];
}

Jsfiddle https://jsfiddle.net/1sh47wfk/1/ में भी

Comments

क्या स्केलिंग-अप व्यवहार पर कोई आधिकारिक दस्तावेज है?

— मैग्नस लिंड ऑक्सलुंड

@MagnusLindOxlund उत्तर से जानकारी प्रयोगात्मक रूप से निर्धारित की गई है। एक त्वरित खोज के बाद मुझे जो निकटतम चीज़ मिली , वह यह है: khronos.org/registry/webgl/specs/latest/1.0/#2.2 , यह कहते हुए: "ऊपर दिए गए अवरोध से अंतरिक्ष की मात्रा नहीं बदलती है जो कैनवास तत्व वेब पेज पर खपत करता है। "जब यह ड्राइंग बफर के आकार को सीमित करने की बात करता है। ऐसा लगता है कि वेबजीएल मानक पागल विस्तार में नहीं जाता है कि कैसे कैनवास तत्व को ड्राइंग बफर प्रदर्शित करना है।

— माइकेल

Answer 13

आप इसे काट सकते हैं और जावास्क्रिप्ट ऑटो में आवश्यकतानुसार कई छोटे कैनवस जोड़ सकते हैं और उपयुक्त कैनवास पर तत्वों को आकर्षित कर सकते हैं। आप अभी भी स्मृति से बाहर भाग सकते हैं, लेकिन आपको एकल कैनवस सीमा द्वारा प्राप्त होगा।

Answer 14

मैं यह नहीं जानता कि कैसे पुनरावृत्ति के बिना अधिकतम संभव आकार का पता लगाया जा सकता है, लेकिन आप यह पता लगा सकते हैं कि क्या किसी दिए गए कैनवास का आकार पिक्सेल को भरने और फिर रंग को वापस पढ़ने के द्वारा काम करता है। यदि कैनवास ने रेंडर नहीं किया है, तो आपके द्वारा वापस प्राप्त रंग मेल नहीं खाएगा। डब्ल्यू

आंशिक कोड:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);